Das CSS Box-Modell beim Webdesign anwenden

Grundlagen: CSS Box-Modell

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

Folgende Abbildung stellt das Box-Modell schematisch dar.

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

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:

Worauf sich die Abstände zu den Seiten beziehen, hängt von der Art der Positionierung 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 (Englisch: width = Breite) und height (Englisch: height = Breite) festgelegt werden. Wird der Wert »width« nicht angegeben, 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

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 Breite und Höhe des Inhaltsbereichs addiert. Da die Padding-Box zur Content-Box gehört, hat sie 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, 2, 3 oder 4 Werte angegeben werden.

Negative Werte für Padding sind nicht erlaubt.

Border-Box

HTML Elemente haben einen Rahmen (Englisch: Border = Grenze. Selbst ein nicht sichtbarer Rahmen (border-width: 0px) gehört zum Element. Die Border-Box begrenzt die Content-Box. Das bedeutet, sie umschließt die Padding-Box sowie 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 = Rand ist ein erzwungener Weißraum (Leerraum) zwischen einem Element und seinem Elternelement oder seinem direkten Nachbar-Element. Die Margin-Box ist der Bereich zwischen dem Element-Rahmen und 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 andere Elemente überlappt werden.

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


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

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

/* Hintergrund: marineBlued */
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;
}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.