Größenangaben und Abstände in CSS

Weist man dem Element nur eine Breite zu, gilt die Breite standardmäßig für den Bereich, der für die Inhalte gedacht ist und content-box genannt wird. Es beinhaltet nicht die Maße für sonstige Abstände oder Rahmen. Die Höhe ist initial 0 Pixel hoch und wird durch den Inhalt vergrößert. Fügt man innerhalb des Elements einen Text ein und ist er insgesamt breiter als die Box, erfolgen automatisch Zeilenumbrüche bei den Leerzeichen und die Höhe der Box wird weiter vergrößert.

Fügt man übergroße Inhalte ein, die nicht umgebrochen werden, z.B. lange Wörter ohne Leerzeichen oder Bilder, dann ragen sie über die Box hinaus und können dadurch andere Elemente überlagern.

Es gibt eine Möglichkeit, die Breite einer Box flexibel zu gestalten. Dabei wird der Box über die Eigenschaft min-width eine Mindestbreite vorgegeben. Damit wird verhindert, dass eine Mindestbreite unterschritten wird bzw. es wird dafür gesorgt, dass bei übergroßen Inhalten die Box automatisch verbreitert wird. Das genaue Verhalten hängt davon ab, ob neben der Eigenschaft min-width auch das Umfließen von Elementen mit float festgelegt wurde oder nicht.

Man kann einem Element über die Eigenschaft max-width eine Maximalbreite zuweisen. In dem Fall wird verhindert, dass die Box eine gewisse Breite überschreitet. Sind übergroße Inhalte vorhanden, ragen sie aus der Box hinaus. Die initiale Breite einer Box, der eine Maximalbreite zugewiesen wurde, ist entweder 0px breit und wird durch den Inhalt verbreitert oder die initiale Breite ist der Wert, der für die Eigenschaft max-width angegeben wurde. Auch hierbei ist das genaue Verhalten davon abhängig, ob mit float das Umfließen von Elementen zugelassen wurde oder nicht.

Wird dem Element zusätzlich über die Eigenschaft height eine Höhe zugewiesen, gilt initial für die Höhe der angegebene Wert. Wenn übergroße Inhalte eingefügt werden, vergrößert sich die Box nicht. In der Standardeinstellung ragen die Inhalte aus der Box heraus und können dadurch andere Elemente überlagern.

Auch die Höhe kann mit einer Mindesthöhe flexibel gestaltet werden. Hierfür verwendet man die Eigenschaft min-height. Werden Inhalte größer als die Box eingefügt, vergrößert sich die Höhe automatisch.

Über die Eigenschaft max-height wird einem Element eine maximale Höhe zugewiesen werden. Initial ist die Box dabei 0px hoch und wird durch den Inhalt vergrößert. Jedoch nur bis zu der maximalen Höhe. Darüber hinaus vorhandene Inhalte ragen aus der Box heraus und können dadurch andere Elemente überlagern.

Bei Inline-Elementen, die non-replaced sind, haben die Eigenschaften width, height etc. keine Auswirkung. Man kann den Elementen jedoch über die Eigenschaft line-height eine Zeilenhöhe zuweisen und dafür sorgen, dass bei Inline-Elementen ober- und unterhalb ein gewisser Abstand entsteht, sodass die Abstände zwischen den Zeilen größer als gewöhnlich ausfallen.

Einem Element kann über die Eigenschaft padding ein Innenabstand zugewiesen werden. Dadurch sorgt man für einen gewissen Abstand zwischen dem Inhaltsbereich (content-box) und dem Rahmen.

Über die Eigenschaft border kann man einer Box einen Rahmen zuweisen. Der Rahmen nimmt den Platz außerhalb von padding ein. Beide Eigenschaften vergrößern standardmäßig die Box. Näheres dazu ist unter Box-Modell beschrieben.

Den Elementen kann man mit der Eigenschaft margin einen zusätzlichen äußeren Abstand zuweisen. Der Effekt ist auf den nachfolgenden Bildern abgebildet. Wurde den Elementen kein margin zugewiesen, nehmen die Boxen ihren Platz wie folgt ein.

Weist man den Elementen mit margin einen Außenabstand zu, ist der Effekt wie nachfolgend abgebildet.

Mit margin legt man die Abstände zu benachbarten Elementen fest. Wenn jedoch mehrere Elemente untereinander angeordnet sind, können diese in bestimmten Fällen einen gemeinsamen Außenabstand bilden, was collapsing margin genannt wird. Das bedeutet, die Außenabstände zwischen dem oberen und unteren Element werden nicht addiert, sondern zusammengeführt. Dabei gilt bei unterschiedlichen margins das größere Maß.

Beispiel für collapsing margin:

Wenn einem Element ein margin von 50px zugewiesen wurde und dem benachbarten Element 25px, dann gilt im Falle von collapsing margin ein Außenabstand von 50px zwischen den beiden Elementen.

Beispiel, wenn collapsing margin nicht zur Anwendung kommt:

Kommt collapsing margin nicht zur Anwendung, werden die beiden Außenabstände zusammengezählt. In dem Beispiel würden sich die beiden Abstände addieren und somit 75px sein.

Hat man einer Box eine Breite und Höhe zugewiesen und ist der Inhalt größer als die Box, ragen sie in der Standardeinstellung aus der Box heraus. Das Verhalten kann über die Eigenschaft overflow beeinflusst werden. Beispielsweise kann man festlegen, dass der herausragende Teil abgeschnitten bzw. nicht angezeigt wird. Es können auch automatisch Scrollleisten eingeblendet werden.

Wenn man Block-Elemente nebeneinander positionieren möchte, dann reicht es nicht aus, für ein Element eine Breite anzugeben, damit das nächste Element rechts (oder links) daneben positioniert werden. Um das Umfließen mit anderen Elementen zu ermöglichen, benötigt man die Eigenschaft float. Mit float: left; wird das Element linksseitig positioniert, sodass es auf der rechten Seite von anderen Elementen umflossen werden kann. Mit float: right; wird das Element rechtsseitig positioniert und kann auf der linken Seite von anderen Elementen umflossen werden.