Zurück: Listen
Weiter: Ausrichtung von Elementen

Box-Modell

Folgende Zeichnung verdeutlicht das Modell:

                 top                                 MT = margin-top
     +=======================================+       BT = border-top
     |           MT   margin                 |       PT = padding-top
     |  +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+  |       PB = padding-bottom
     |  |        BT   border              |  |       BB = border-bottom
     |  |  +---------------------------+  |  |       MB = margin-bottom
     |  |  |     PT   padding          |  |  |       ML = margin-left
     |  |  |  +.....................+  |  |  |       BL = border-left
left |ML|BL|PL|       content       |PR|BR|MR| right PL = padding-left
     |  |  |  +.....................+  |  |  |       PR = padding-right
     |  |  |     PB                    |  |  |       BR = border-right
     |  |  +---------------------------+  |  |       MR = margin-right
     |  |        BB                       |  |
     |  +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+  |       = Margin-Grenze
     |           MB                          |       ~ Border-Grenze
     +=======================================+       - Padding-Grenze
                 bottom                              . Content-Grenze

Mit folgenden Eigenschaften kontrollieren Sie die einzelnen Bereiche:

margin (margin-top, margin-right, margin-bottom und margin-left)

Mit der Eigenschaft margin kontrollieren Sie den Margin-Bereich einer Box.

<Länge>
<Prozent>
auto
inherit

Mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left kontrollieren Sie jeweils nur eine Seite des Margin-Bereiches. Folgende Regeln sind also identisch:

p {
   margin-top: 2em;
   margin-right: 2em;
   margin-bottom: 2em;
   margin-left: 2em;
}

p { margin: 2em; }

Ist für margin nur ein Wert angegeben, bezieht er sich auf alle vier Seiten. Sind zwei Werte angegeben, bezieht sich der erste auf oben und unten und der zweite auf rechts und links. Sind drei Werte angegeben, bezieht sich der erste auf oben, der zweite auf rechts und links und der dritte auf unten. Sind vier Werte angegeben, bezieht sich der erste auf oben, der zweite auf rechts, der dritte auf unten und der vierte auf links. Folgende Übersicht verdeutlicht das Prinzip noch einmal:

margin: 1em;             /* oben, rechts, unten und links: 1em             */
margin: 1em 2em;         /* oben und unten: 1em, links und rechts: 2em     */
margin: 1em 2em 3em;     /* oben: 1em, links und rechts: 2em, unten: 3em   */
margin: 1em 2em 3em 4em; /* oben: 1em, rechts: 2em, unten: 3em, links: 4em */

Sie können auch negative Werte angeben:

h1 { margin-left: -2em; }

Mit margin können Sie Elemente auf einer Seite auch horizontal zentrieren:

table {
   margin-left: auto;
   margin-right: auto;
}
padding (padding-top, padding-right, padding-bottom und padding-left)

Mit der Eigenschaft padding kontrollieren Sie den Padding-Bereich einer Box.

<Länge>
<Prozent>
inherit

Mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left kontrollieren Sie jeweils nur eine Seite des padding-Bereiches. Es gelten die gleichen abkürzenden Schreibweisen wie für margin.

Folgendes Beispiel veranschaulicht die Auswirkung der Eigenschaften margin und padding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>'margin' und 'padding'</title>
<style type="text/css">
p {
   border: 1px solid;
   text-align: center;
}

.drei {
   margin: 4em;
}
.vier {
   padding: 10px;
}
</style>
</head>

<body>

<p class="eins">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

<p class="zwei">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

<p class="drei">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

<p class="vier">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

</body>
</html>

Beispieldokument ansehen

Rahmen

border-style (border-top-style, border-right-style, border-bottom-style und border-left-style)

Mit der Eigenschaft border-style bestimmen Sie die Art der Linie, die den Rahmen zeichnet.

none und hidden
Kein Rahmen. none ist der Initialwert.
dotted
Gepunkteter Rahmen.
dashed
Gestrichelter Rahmen.
solid
Durchgezogener Rahmen.
double
Doppelter durchgezogener Rahmen.
groove
Der Rahmen sieht aus wie in die Oberfläche geritzt.
ridge
Der Rahmen sieht aus, als würde er auf der Oberfläche aufliegen.
inset
Der Rahmen lässt das Element so aussehen, als ob es tiefer in der Oberfläche läge.
outset
Der Rahmen lässt das Element so aussehen, als ob es sich ein wenig aus der Oberfläche heraus hebt.
inherit

Ein Rahmen würde also zum Beispiel wie folgt angegeben werden:

img.galerie { border: outset; }

Mit den Eigenschaften border-top-style, border-right-style, border-bottom-style und border-left-style bestimmen Sie den Rahmen jeweils nur für eine Seite. Eine Rahmenseite links könnte wie folgt bestimmt werden:

p.anmerkung { border-left-style: dashed; }
border-width (border-top-width, border-right-width, border-bottom-width und border-left-width)

Mit der Eigenschaft border-width bestimmen Sie die Breite des Border-Bereiches, also die Dicke des Rahmens. Mit den Eigenschaften border-top-width, border-right-width, border-bottom-width und border-left-width bestimmten Sie die Breite jeweils nur für eine Seite.

medium
Ein mittlerer Rahmen.
thin
Ein dünner Rahmen.
thick
Ein dicker Rahmen.
<Länge>
Während die Darstellung von thin, medium und thick abhängig von der Browserimplementation ist, können Sie mit einer konkreten Länge eine exakte Breite angeben. Der Wert darf nicht negativ sein.
inherit

Es gelten die gleichen abkürzenden Schreibweisen wie für margin und padding:

border-width: 1px;             /* oben, rechts, unten und links: 1px             */
border-width: 1px 2px;         /* oben und unten: 1px, links und rechts: 2px     */
border-width: 1px 2px 3px;     /* oben: 1px, links und rechts: 2px, unten: 3px   */
border-width: 1px 2px 3px 4px; /* oben: 1px, rechts: 2px, unten: 3px, links: 4px */

Die Angabe einer Rahmenbreite ist optional. Falls sie keine explizit angeben, wird der Initialwert medium angenommen.

border-color (border-top-color, border-right-color, border-bottom-color und border-left-color)

Mit der Eigenschaft border-color bestimmen Sie die Farbe des Border-Bereiches, also die Farbe des Rahmens. Mit den Eigenschaften border-top-color, border-right-color, border-bottom-color und border-left-color bestimmten Sie die Farbe jeweils nur für eine Seite.

<Farbe>
transparent
inherit

Die Angabe einer Rahmenfarbe ist optional. Wenn Sie keine bestimmen, wird die durch die Eigenschaft color bestimmte Vordergrundfarbe des Elementes gewählt.

border (border-top, border-right, border-bottom, border-left)

Mit der Eigenschaft border fassen Sie die Eigenschaften border-style, border-width und border-color in einer Eigenschaft zusammen. Schreiben Sie deren Werte durch Leerzeichen getrennt in beliebiger Reihenfolge einfach hintereinander. Folgende Regeln führen immer zum gleichen Ergebnis:

h1 {
   border-width: 2px;
   border-style: solid;
   border-color: #309;
}

h1 {
   border-top: 2px solid #309;
   border-right: 2px solid #309;
   border-bottom: 2px solid #309;
   border-left: 2px solid #309;         
}

h1 { border: 2px solid #309; }

h1 { border: solid #309 2px; }

Ein Beispiel

Schauen Sie sich bitte folgendes XHTML-Dokument an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Rahmen</title>

<style type="text/css">
#content {
   width: 50%;         /* Breite des Elementes */
   margin: auto;
   border: solid;
   color: black;
   background-color: green;
}

p {
   border: 3px dashed #666;
   margin: 1em 2em;
   padding: 5px 0 3px 20px;
   color: black;
   background-color: yellow;
}
</style>
</head>

<body>
   <div id="content">
      <p>Erster Absatz</p>
      <p>Zweiter Absatz</p>
   </div>
</body>
</html>

Beispieldokument ansehen

Kopieren Sie den Quelltext in einen Editor und verändern oder entfernen Sie die einzelnen Deklarationen, um zu sehen, was passiert.

Zurück: Listen
Weiter: Ausrichtung von Elementen
Zum Seitenanfang