30: The CSS layout model - boxes, borders, margins, padding


Zusammengefasst nach dem Artikel von Ben Henick

Quelle: http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
30: The CSS layout model - boxes, borders, margins, padding

Weißraum um ein Objekt setzen: margin

Margin:
Margin kann für oben, rechts, unten und links entweder jeweils einzeln oder für alle zusammen eingestellt werden. Die Werte dazu werden meistens in px oder em angegeben. Bei Prozentangaben muss beachtet werden, dass sich der Wert auf das Elternelement bezieht und nicht auf die Breite des gesamten Dokumentes.
Das auto margin kann dazu verwendet werden, dass definierte Element automatisch in der Mitte des Dokumentes zu zentrieren.
Es können auch negative margins vergeben werden. Wenn einem Element dann ein hoher negativ margin gegeben wird, kann es auch schon mal zu einer Überlappung von zwei Elementen kommen.
Bei angrenzenden Block - Elementen mit einem margin von größer als null, wird nur der größere der zwei margins angewandt. Listen und Überschriften sind keine Block - Elemente und somit wird der kleinere margin nicht in den anderen verschwinden.

Ränder:
Es gibt auch bei Ränder einen Kürzel, bei dem dann alle relevanten Einstellungen vorgenommen werden können. Dabei können bis zu 4 verschiedenen Einstellungen vorgenommen werden. Dies ist aber nur sinnvoll, wenn um das Objekt ein konsistenter Rahmen gezogen werden will. Mit den Ränder Einstellungen kann die dicke, die Strichart, Farbe und die Abstände definiert werden. Natürlich kann auch für jede einzelne Seite der Rand individuell gestaltet werden (border-bottom, border-top, border-right, border-left).

padding:
Das padding erzeugt einen Abstand zwischen dem margin oder Umrandung eines Elements und dessen Inhalt.


Arbeiten mit den Elementen „width“ und „height“
 
Um in einem CSS file die Ausmaße eines Elementes zu beeinflussen, werden width, height, min-widht, max-width, min-height und max-height verwendet. Jedoch gibt es ein paar Dinge zu beachten:
width und height können nicht bei inline Elementen (span, strong, em) angewandt werden.
bei Bildern kann jedoch eine width oder height angegeben werden, auch wenn es ein inline Element ist
widht und height sind nur zwei Möglichkeiten um die Ausmaße eines Elementes zu beeinflussen

Manchmal ist es auch wichtig, die Ausmaße eines Elementes einzuschränken, um damit zum Beispiel die Leserlichkeit einer Textspalte zu gewährleisten. Hierfür werden bei width oder height die min- und max- Werte davor gehängt.

Wenn nun widht und height festgelegt worden sind, ist es auch manchmal nötig zu überlegen, was mit einem Inhalt passiert, der mehr Platz braucht als vorhanden. Mit der overflow Eigenschaft mit seinen vier Werten - visible, hidden, auto und scroll hand, wird das gehandhabt.
visible: beeinflusst der zu lange Inhalt nicht den Fluss oder margin der angrenzenden Elemente.
hidden: alle Inhalte oberhalb des Elementes werden verborgen.
atuo: der Überfluss des Elements wird wie beim hidden gehandhabt, nur dass ein Scrollbar erzeugt wird.
scroll: vertikale wie auch horizontale Scrollbars werden hinzugefügt, auch wenn sie nicht gebraucht werden.
Wenn nun die width und height Werte verändert werden, muss man beachten, dass der Inhalt des Elementes, plus seinem margin, padding und Umrandung, noch immer in die definierte Breite hineinpasst.


Arbeiten mit dem Dokumenten flow
 
Bei einer Gestaltung einer mehrspaltigen Webseite sind die Begriffe: display, float und clear sehr wichtig. Bei der display Eigenschaft spielen vor allem inline und block Elemente eine wichtige Rolle. Wenn ein Element nun die display Eigenschaft erhält, werden sich inline Elemente wie block Elemente verhalten oder umgekehrt.
Die float Eigenschaft definiert, wie anschließende Inhalte eines Elementes um diesen herumfließen soll. Dabei können die Werte float: left, float: right oder float: none eingestellt werden.
Wie auch beim float werden bei der clear Eigenschaft die Werte left, right oder none hinzugefügt. Diese Eigenschaft definiert jedoch, wie ein Element um all seine Nachbarn fließen soll.