Cascading Stylesheets
Stil mit <Stil>
Cascading Stylesheets
Stil mit <Stil>
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
| 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.
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}
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>
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}
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.
| 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.
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.