CSS Grundlagen: Beeindruckende Web-Layouts leicht gemacht – Tipps und Tricks für das Box-Modell

English

Das Box-Modell: HTML-Elemente mit Hilfe des Box-Modells positionieren

In CSS wird das sogenannte Box-Modell verwendet. Das Box-Modell ist ein grundlegendes Prinzip, das notwendig ist, um das Konzept von CSS zu verstehen. Prinzipiell werden in CSS alle Elemente als rechteckige Box behandelt. Jede Box besteht aus dem

Eine schematische Darstellung für das Box-Modell ist in der folgenden Abbildung zu sehen.

Boxmodell - Inhalt, Padding, Border, Margin
Schema: Das Box-Modell

Jedes HTML-Element wird als rechteckiger rechteckiger Bereich (Kasten) betrachtet. Padding, Border und Margin bilden die Grundlage für das Layout einer Webseite.

Eine Box hat folgende Eigenschaften:

Worauf sich die Abstände zu den Seiten beziehen, hängt von der Art der Positionierung (Position) ab.

Content-Box

Text, Bilder und sonstige Inhalte stehen im Inhaltsbereich. Die Content-Box definiert den Inhaltsbereich, d.h. sie bezeichnet das jeweilige HTML-Element. Die Größe des Inhaltsbereichs kann durch die Eigenschaften width (Deutsch: Breite) und height (Deutsch: Höhe) festgelegt werden. Wenn der Wert für die Eigenschaft width nicht angegeben wird, dann werden

Ohne die Angabe von height werden alle Elemente nur so hoch wie ihr Inhalt.

Typische Eigenschaften für die Content-Box sind:

Padding-Box

Der Innenabstand (Englisch: Padding) eines HTML-Elements ist der Abstand eines HTML-Elements zu seinem Rahmen. Die Padding-Box gehört zur Content-Box. Deshalb werden die Werte für Padding zur Breite und Höhe des Inhaltsbereichs addiert. Da die Padding-Box zur Content-Box gehört, hat sie immer die gleiche Hintergrundfarbe wie der Inhaltsbereich. Der Innenabstand (Padding) kann für alle vier Seiten gleich sein oder für jede Seite individuell festgelegt werden. Für die Eigenschaft Padding können 1 bis 4 Werte angegeben werden.

Negative Werte für Padding sind nicht erlaubt.

Border-Box

HTML Elemente haben immer einen Rahmen (Englisch: Border). Selbst ein nicht sichtbarer Rahmen (border-width: 0) gehört zum Element. Die Border-Box begrenzt die Content-Box. Das bedeutet, sie umschließt die Padding-Box und den Rahmen des Elements.

Die Border-Box hat keinen Hintergrund.

Genau wie bei Padding sind auch für Border negative Werte nicht gestattet.

Margin-Box

Der Außenabstand (Englisch: Margin) ist ein erzwungener Leerraum (auch Weißraum genannt) zwischen einem Element und seinem Elternelement und seinen direkten Nachbarelementen. Die Margin-Box ist der Bereich zwischen dem Element-Rahmen und den angrenzenden Elementen. Margin ist sozusagen ein unsichtbarer Raum um den Rahmen, der andere Elemente vom Rahmen weg schiebt.

Negative Werte für Margin sind zulässig. Ein negativer Wert für Margin kann aber dazu führen, dass sich Elemente überlappen.

Im Gegensatz zu Padding hat Margin keine Auswirkung auf die Breite und Höhe des Elements. Der gesamte Platzbedarf für das Element ist die Content-Box zuzüglich Rahmen und Margin.

Der Außenabstand Margin kann für alle vier Seiten gleich sein oder für jede Seite individuell festgelegt werden. Für die Eigenschaft Margin können 1, 2, 3 oder 4 Werte angegeben werden.

Beachte:

  1. Das Eltern-Element und angrenzende Nachbar-Elemente können auch selbst ein Margin haben.

  2. Margin-Bereiche sind immer transparent und können deshalb nicht gestaltet werden. D.h., für Margin-Bereiche wird immer die Hintergrundfarbe des übergeordneten Elements angezeigt.

Beispiel CSS 
/* Bereiche definieren */
div.box1 {
  /* Außenabstand alle Seiten */
  margin: 0.5em;

  /* Innenabstand alle Seiten */
  padding: 0.3em;

  /* Breite: 30% */
  width: 30%;

  /* Hintergrund: antiqueWhite */
  background: #faebd7;

  /* Rahmen Container box1 */
  border: 0.125em double #000000;

  /* Container enclose neben box1 */
  float: left;
}


div.box2 {
  /* Innenabstand alle Seiten */
  padding: 0.5em;

  /* Breite 100% von enclose */
  width: 100%;

  /* Hintergrund: lightRed */
  background: #ff7276;

  /* Rahmen Container box2 */
  border: 0.125em dotted #ffffff;
}


div.enclose {
  /* Außenabstand vertikal, horizontal */
  margin: 0.5em 0.5em;

  /* Breite: 60% */
  width: 60%;

  /* Hintergrund: marineBlue */
  background: #bbe8bb;

  /* Rahmen Container »enclose« */
  border: 0.5em double #888888;

  /* Container »enclose« neben box1 */
  float: left;
}


/* Absatz in box1 */
div.box1 p {
  /* Innenabstand alle Seiten */
  padding: 0.5em;

  /* Hintergrund Absatz in box1 */
  background: #dfdfbc;

  /* Schriftfarbe Absatz in box1 */
  color: #404040;

  /* Rahmen Absatz in box1 */
  border: 0.125em solid #dd0000;
}


/* Absatz in box2 */
div.box2 p {
  /* Innenabstand alle Seiten */
  padding: 0.5em;

  /* Hintergrund Absatz in box2 */
  background: #bbe8bb;

  /* Schriftfarbe Absatz in box2 */
  color: #000000;
}
Beispiel HTML 
<div class="box1">
<p>Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die für alle Browser geeignet ist.
</p>
</div>

<div class="enclose">
<div class="box2">
<p>Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte, hatte einer seiner zahllosen Komplizen dieselbe Idee.</p>

<p>Wer würde ihm schon spät in der Nacht folgen. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte als er eine dunkle Gestalt im dichten Nebel erblickte. War jetzt wirklich alles vorbei?</p>
</div>
</div>
Ausgabe des HTML-Codes

Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die für alle Browser geeignet ist.

Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte, hatte einer seiner zahllosen Komplizen dieselbe Idee.

Wer würde ihm schon spät in der Nacht folgen. Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte als er eine dunkle Gestalt im dichten Nebel erblickte. War jetzt wirklich alles vorbei?

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.