CSS Box-Modell : Grundlagen beim Webdesign anwenden

In CSS gibt es das sogenannte Box-Modell (Kastenmodell). Das Box-Modell ist ein grundlegendes Prinzip, das zum Verständnis von CSS notwendig ist. Prinzipiell werden in CSS alle Elemente als rechteckige Box behandelt. Jede Box besteht aus

• Inhalt,
• Innenabstand (Padding),
• Rahmen (Border) und
• Außenabstand (Margin).

Die folgende Abbildung stellt das Box-Modell schematisch dar.

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

Jede Box hat folgende Eigenschaften:

• Inhaltsbereich Breite (Content width),
  Inhaltsbereich Höhe (Content height)

  Text und sonstiger Inhalt steht im Inhaltsbereich. Die Breite width bzw. Höhe height des Elements bezieht sich immer auf den Inhaltsbereich, nicht auf die gesamte Breite bzw. Höhe des Elements.

  Die gesamte Breite für das Element ist:

  • linker Außenabstand (margin-left)
    + linker Rahmen (border-left)
    + linker Innenabstand (padding-left)
    + Inhaltsbereich
    + rechter Innenabstand (padding-right)
    + rechter Rahmen (border-right)
    + rechter Außenabstand (margin-right)
    = Gesamtbreite der Box

  Die gesamte Höhe für das Element ist:

  • oberer Außenabstand (margin-top)
    + oberer Rahmen (border-top)
    + oberer Innenabstand (padding-top)
    + Inhaltsbereich
    + unterer Innenabstand (padding-bottom)
    + unterer Rahmen (border-bottom)
    + unterer Außenabstand (margin-bottom)
    = Gesamthöhe der Box

• Innenabstand (Padding)
  Einfach ausgedrückt wird mit Padding der Innenabstand vom Inhaltsbereich (Englisch: Content-Area) eines Elements zu seinem Rahmen definiert. Der Padding-Bereich hat immer die gleiche Hintergrundfarbe wie der Inhaltsbereich. Um die Innenabstände zu definieren, kann man für Padding 1, 2, 3 oder 4 Werte angeben. Die Eigenschaft Padding ist die Kurzschreibweise für folgende vier Eigenschaften, mit denen man den Innenabstand für die entsprechende Seite definieren kann:

  • padding-top (oberer Innenabstand)
  • padding-right (rechter Innenabstand)
  • padding-bottom (unterer Innenabstand)
  • padding-left (linker Innenabstand)

• Rahmen (Border)
  Mit der Eigenschaft Border wird der Rahmen für alle 4 Seiten gleichzeitig definiert. Mit den folgenden Eigenschaften kann man den Rahmen für jede Seite separat definieren:

  • border-top (oberer Rahmen)
  • border-right (rechter Rahmen)
  • border-bottom (unterer Rahmen)
  • border-left (linker Rahmen)

• Außenabstand (Margin)
  Mit der Eigenschaft Margin wird der Abstand eines Elements zu seinen direkten Nachbar-Elementen festgelegt. Margin definiert den Abstand, den benachbarte Elemente haben. Die Eigenschaft Margin ist die Kurzschreibweise für folgene vier Eigenschaften, mit denen man den Außenabstand für jede Seite separat angeben kann.

  • margin-top (Außenabstand oben)
  • margin-right (Außenabstand rechts)
  • margin-bottom (Außenabstand unten)
  • margin-left (Außenabstand links)

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

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 (Englisch: width = Breite) und height (Englisch: height = Höhe) festgelegt werden. Wenn der width nicht angegeben wird, dann werden

• Block-Elemente so breit wie das übergeordnete Element, d.h. so breit wie das Eltern-Element.

• Inline-Elemente nur so breit wie ihr Inhalt.

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

Typische Eigenschaften für die Content-Box sind:

• Background für die Hintergrund-Farbe

• und für die Schriftfarbe Color.

Padding bezeichnet den Innenabstand (Englisch: Padding = Polsterung) eines HTML-Elemnts zu seinem Rahmen. Die Padding-Box gehört zur Content-Box. Deshalb werden die Werte für Padding zu den Werten für die 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 individuell für jede Seite festgelegt werden. Für die Eigenschaft Padding können 1 bis 4 Werte angegeben werden.

Negative Werte für Padding sind nicht erlaubt.

HTML Elemente haben immer einen Rahmen (Englisch: Border = Grenze. 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.

Der Außenabstand (Englisch: Margin = Rand ist ein erzwungener Leerraum (auch Weißraum genannt) zwischen einem Element und seinem Elternelement bzw. 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.

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.

/* 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.0625em dotted #0000df;
}


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.0625em 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;
}

<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>

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