Kapitel 8: Innenabstand, Ränder und Aussenabstand
Boxen der Basis-Elemente
Wie im Kapitel 7.1 beschrieben wurde, erzeugt jedes Element eine rechteckige Box rund um das Element. Aussenabstände, Ränder und der Innenabstand, sowie natürlich die Content-Länge und -Höhe bestimmen die Anordnung dieser Elemente auf einer Seite im normalen Elementfluss. Jede nachfolgende Kind-Box übernimmt die Breite der vorhergehenden Box und gibt gerade soviel Abstand wie nötig, damit sich die Boxen nicht überlappen. Nur handgesetzte Positionierungen oder negative Abstände lassen Abweichungen der normale Darstellung der Box zu.
Die CSS-Box, beginnend von der Breite/Höhe des Content-Bereichs bis zur äusseren Ecke bestimmen die effektive Gesamtgrösse der Box.
Höhe und Breite des Content-Bereichs
Wichtig ist: Die Höheangaben eines Blockelementes verhalten sich etwas anders als die Breitenangaben. Es kann nicht mit Prozentangaben gearbeitet werden.
Vertikale Formatierung von Blockelementen
Auch MS Internet Explorer 6.0 erliegt im Modus "Transitional" (Quirks-Modus) den Tücken des Box-Model-Fehlers von IE5 und 5.5. Auch Inline-Elemente sind davon betroffen.(Der Fehler besteht darin, dass bei gegebener Breite eines Elementes die Eigenschaften margin, padding und border von dieser Breite subtrahiert anstatt addiert werden, wie dies CSS1.0 verlangt.)
S. dazu den Box-Model-Hack von Tantik Celic
Dieser Hack ist umstritten und es wird empfohlen, beispielsweise die CSS-Browserweiche (Conditional Comments für IE) zu benutzen: Anleitung von P.P.Koch
Eine Demonstration des Box-Model-Bugs in Internet Explorer findet sich auf MatteDesign.ch/Toolcase/CSS/Box-Modell
Der Raum um den Content-Bereich wird gemeinhin mit Padding, Margins oder dem Border geschaffen. Bei Padding-Angaben dehnt sich der Hintergrund (Background) auf die gesamte Padding-Breite aus.
Margins hingegen schaffen extra leeren Raum um die Elemente herum, der unsichtbar bleibt aber die andern Elemente trotzdem davon abhält, zu überlappen.
Aussenabstand (margin)
Für jede einzelne Seite der border-Box sind verschiedene Stilangaben möglich: (margin-top , margin-right, margin-bottom, margin-left)
Die Reihenfolge unterschiedlicher Werteangaben verläuft immer im Uhrzeigersinn:von oben (top), rechts (right), unten (bottom) nach links (left). Diese Werte können alle unterschiedliche Massangaben und Werte haben. Sie lassen sich jedoch auch zusammenfassen: 2 Werte: Oben/Unten, rechts/links oder drei Werte: Oben,rechts/links, unten. (Replikation).
Die Shorthand-Angabe für Margins:
Beispiel: margin {3em 10% 1em 15px} Bedeutet: top-, right-, bottom-, left-Angabe im Uhrzeigersinn.
Beispiel: margin{1cm auto 1cm} Bedeutet: 1cm top, auto für right und left, 1cm bottom.
Beispiel: margin {15px 10%} Bedeutet: 15px top und bottom, 10% right und left.
Der Default-Wert der margin-Angabe ist null. Es können alle Massangaben verwendet werden (Siehe die besondere Stellung von auto).
Trotzdem haben die verschiedenen Browser unterschiedliche eingbaute Margins (so beispielsweise bei <p> oder <h>-Überschriften.
Horizontale Zentrierung des Elementes mit 'auto'
Mit margin-left: auto und margin-right: auto zentrieren Sie ein Element horizontal.
Mit width:auto margin-left:15px und margin:right: 15px wird der Content-Bereich "fluid", d.h. er passt sich an die Bildschirmgrösse an.
Werden alle Werte auf auto gesetzt, so dehnt sich der Content-Bereich auf die Breite des Elternelementes aus.
Vertikale Zentrierung ist so jedoch nicht möglich: Vertikale Zentrierung
Prozentangaben bei Margins
Prozentangaben in Margins beziehen sich immer auf die Länge/Breite des Elternelementes.
Also ein <p margin:10%> in einem Div-Eleternelement von 200px Länge, wird genau 20px margin haben.
Die Möglichkeit „fluiden“ Webdesigns, bei dem sich die Grösse der Blockelemente automatisch an die Bildschirmgrösse anpasst, besteht darin, dass gewisse Elemente keine vorgegebene Breite haben und sich vollständig nach der jeweiligen Grösse des Elternelementes ausrichten. (Z.B mit Prozentweiten des Elternelementes und mit auto).
Negative und zusammenfallende Margin-Angaben
Ohne dass das Box-Model verletzt wird, können Margins mit negativen Massangaben zu interessanten Effekten führen. Untergeordnete Elemente können in Beziehung auf das Elternelemnt fast beliebig positioniert werden.
Margins und Inline-Elemente
In ersetzten Inline-Elementen (Bilder) können Margin-Angaben verwendet werden. Die Darstellung hängt dabei in erster Linie von line-height-Attribut ab. Bei nicht ersetzten Elementen, ist keine Auswirkung von Margin in Inline-Elementen sichtbar, jedenfalls was die top- oder bottom-Margins betrifft. Anders sieht es natürlich bei right/left-margin. Allerdings bezieht sich die Margin-Angabe bei Inline-Elementen nicht auf Anfang oder Ende einer Zeile, sondern lediglich auf das übergeordnete Elemente. Zeilumbrüche werden deshalb nicht verhindert.
Box-Eigenschaften bei ersetzten Elementen wurden in Kapitel 7.2 behandelt.
Randgestaltung in CSS (border)
Seit CSS2.1. Reicht der Background genau zur äussersten Rand des Borders (und nicht nur bis ans Ende von Padding, wie früher). Borders sind per default ungesetzt (aber dennoch vorhanden) und zwar im Typus „Medium“, was etwa 2px bedeutet. Fehlende Farbangaben von Borders richten sich nach der Textfarbe des Dokumentes (oder des übergeordneten Elementes). Color vererbt sich, d.h. Wenn keine Vordergrundfarbe definiert wurde, ist es die Farbe des Body (oder des Browsers).
Randstile (border-style)
Randgrösse (border-width)
Randfarbe (border-color)
Rand Kurzfassung (border)
Die kürzeste Fassung des border-Arguments ist die Gesamtangabe mit :
border: thick solid grey.
Sonst jedoch kann man die kompakte Schreibweise auch für eine der Borderseiten anwenden, oder man definiert für eine bestimmte Seite einfach eine Ausnahme, was mit der Kaskadierungsvererbung in Einklang steht.
Borders in Inline-Elementen
Hier gilt dasselbe, wie schon bei den Margins. Massgeblich ist die Zeilenhöhe, die, wenn unverändert, keine schönen Ergebnisse zeitigt. Anders ist es mit border-left oder border-right, welche auf der voreingestellten Zeilenhöhe angezeigt werden. Für ersetzte Inline-Elemente (img) gelten andere Regeln, weil das Bild eine eigene Zeilenhöhe definiert.
Innenabstände (padding)
Padding kann auf alle Seiten individuell angewendet werden: padding-top, padding-right, padding-bottom, padding-left.
Beispiel: padding: { 10px 20px 1em 10px } Bedeutet: Paddings für jede Seite im Urzeigersinn (top, right, bottom, left)
Beispiel: padding {2em 3%} Bedeutung: top/bottom: 2em, right-left: 2em (replikativ)
Beispiel: padding-left: {10%} Bedeutung: Nur linker Rand.
Tip: Gebrauchen Sie Padding nur für ihre vorgesehene Funktion, den Innenabstand zwischen dem Content-Bereich und dem Rand (border). Für die Positionierung von Content ist margin viel flexibler.
Prozentwerte mit Padding
Bezieht sich auf die Breite des übergeordneten Elementes.
Padding von Inline-Elementen
Keine Probleme bei Inline-Elementen gibt es bei rechtem und linken Padding. Top-Padding und Bottom-Padding dehnt den Background entsprechend aus und ist letztlich begrenzt durch die Zeilenhöhe line-height.
Padding in ersetzten Elementen
Der Hintergrund dehnt sich aus, weil das ersetzte Element die Zeilenhöhe beinflusst. Unklar ist die Browserreaktion auf Padding von Input-Elementen.
Weiter zu Kapitel 9: Farben und Hintergründe