Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Margin – Stile für den äußeren Rand

Das Boxmodell definiert einen inneren Rand, einen Rahmen und einen äußeren Rand um das Element.

Der innere Rand, padding, zeigt die gleiche Hintergrundfarbe wie das Element. margin, der äußere Rand, bildet den Einzug des Elements gegen den umgebenden Block. Dazwischen liegt der Rahmen, border.

margin-top • margin-right • margin-bottom • margin-left • margin

## margin-top | margin-right | margin-bottom | margin-left

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | margin-top legt die Größe des oberen Einzugs fest. | length | percentage | auto
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | margin-right legt die Größe des rechten Einzugs fest. | length | percentage | auto
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | margin-bottom legt die Größe des unteren Einzugs fest. | length | percentage | auto
IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | margin-left legt die Größe des linken Einzugs fest. | length | percentage | auto

length kann in einer der folgenden Maßeinheiten angegeben werden (Voreinstellung ist 0):

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) basiert auf der vollen Elementbreite, die als 100% definiert ist.

auto weist den Browser an, die Größe des Einzugs automatisch zu berechnen. Die Angabe von auto stellt sicher, dass vorangegangene Deklarationen den jeweiligen Einzug nicht beeinflussen.

#### Beispiel 1

Zwischen zwei Absätzen, die typischerweise durch p-Elemente gebildet werden, entsteht in HTML immer ein Durchschuss, der sich im reinen HTML nicht ausschalten lässt, sondern erst mit einem Stylesheet:

       p { width: 500px;
           text-indent: 25px;
           margin: 0px}

#### Beispiel 2

Text mit margin rechts oben im Browserfenster positionieren:

    <style type="text/css">
       <!--
       p { width: 400px;
           margin: 2% 2% auto auto;
           padding: 40px 40px;
           border: 1px #999999 solid}
       -->
    </style>
    </head>
    <body>
       <p>Der Text ist mit margin rechts oben im
       Browserfenster positioniert</p>
    </body>
    </html>

#### Beispiel 3

Einen Text mit margin-right und margin-left in der Mitte des Browserfensters positionieren:

    p { width: 450px;
        background-color: ivory;
        margin-top: 15px;
        margin-right: auto;
        margin-bottom: 15px;
        margin-left: auto}

#### Bemerkung

Die Positionierung von Elementen durch die Eigenschaft margin wie in den Beispielen 2 und 3 funktioniert im Internet Explorer 5/5.5 für Windows nicht korrekt.

↑

## margin

IE4+ M1 N4+ O5+ Version: CSS1 Erblich: Nein | margin fasst alle individuellen Stylesheet-Eigenschaften für margin-top, margin-right, margin-bottom und/oder margin-left zusammen und gibt sie in einer Deklaration an. | [ length | percentage | auto ]{1,4}

margin kann einen, zwei, drei oder vier Werte angeben:

Wenn ein Wert angegeben ist, werden alle vier Einzüge durch diesen Wert bestimmt.

Wenn zwei Werte angegeben sind, werden die Einzüge oben und unten auf den ersten Wert gesetzt und der rechte und linke Einzug auf den zweiten Wert.

Wenn drei Werte angegeben sind, wird der obere Einzug auf den ersten Wert gesetzt, der rechte und linke Einzug auf den zweiten Wert und der untere Einzug auf den dritten Wert.

Wenn vier Werte angegeben sind, ist die Reihenfolge top, right, bottom, left: Der obere Einzug wird auf den ersten Wert gesetzt, der rechte Einzug auf den zweiten, der untere Einzug auf den dritten und der linke Einzug auf den vierten Wert.

length kann in einer der folgenden Maßeinheiten angegeben werden:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

percentage (Prozentsatz) basiert auf der vollen Elementbreite, die als 100% definiert ist.

auto weist den Browser an, die vier Abstände automatisch zu berechnen. Die Angabe von auto stellt sicher, dass vorangegangene Deklarationen die Einzüge nicht beeinflussen.

#### Beispiel

     body { margin: 10% 40px 10% 40px; }

ist die Einstellung des Einzugs für dieses Dokument im zentralen Stylesheet.

Mit <body style="margin: auto;"> würde der Einzug für dieses Dokument auf die Voreinstellung zurückgesetzt und der Einzug vom Browser bestimmt.

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen