Beispiele für die Anwendung des Box-Modells

Farben für die einzelnen Bereiche

  • Inhaltsbereich ist GELB
  • Rand grün
<div style="background-color:yellow;
            width:  400px;
            height: 100px;
">
INHALT
</div>
width: 400px; height: 100px; 
<div style="background-color:yellow;
            width: 50%;
            height: 50px;
">
INHALT
</div>
width: 50%; height: 50px; 

<div style="background-color:yellow;
            width:350px;
            height:50px;
            border:3px green solid
">
INHALT
</div>
width: 350px;
height: 50px;
border: 3px green solid; 

<div style="background-color:yellow;
            width:400px;
            height:100px;
            padding: 10px;
            border:3px green solid
">
INHALT
</div>
width: 400px;
height: 100px;
padding: 10px;
border: 3px green solid; 

<div style="background-color:yellow;
            width:400px;
            height:100px;
            padding: 10px;
            margin: 15px;
            border:3px green solid
">
INHALT
</div>
width: 400px;
height: 100px;
padding: 10px;
margin: 15px;
border: 3px green solid;

Randgestaltung und Möglichkeiten

Und nun Spielvarianten zum Rand - dem Rand kann für jeder Seite eine Definition mitgegeben werden.

Mögliche Werte:
Linie = solid
kein Rahmen = none
unsichtbarer Rahmen = hidden
gepunktet = dotted
gestrichelt = dashed
doppelte Linie = double
3D-Effekt = groove |ridge | inset | outset 

<div style="background-color:yellow;
            width:400px;
            padding: 10px;
            margin: 15px;
            border-top: 3px green solid;
            border-right: 2px red hidden;
            border-bottom: 2px black dashed;
            border-left: 12px red double;
">
INHALT
</div>
width: 400px;
padding: 10px;
margin: 15px;
border-top: 3px green solid;
border-right: 0px red hidden;
border-bottom: 2px black dashed;
border-left: 12px red double;

unterschiedliche Definitionen der Abstände

unterschiedliche Definitionen der Abstände für oben, unten, rechts und links

Beim Außenabstand (margin)

Genauso wie beim Rahmen kann für den Außenabstand verschiedene Abstände definiert werden.

margin-top: Wert;
margin-right: Wert;
margin-bottom: Wert;
margin-left: Wert;

Beim Innenabstand (padding)

Genauso wie beim Rahmen kann für den Außenabstand verschiedene Abstände definiert werden.

padding-top: Wert;
padding-right: Wert;
padding-bottom: Wert;
padding-left: Wert;

Angaben verkürzen

Es gibt Kurzschreibweisen. Haben alle 4 Seiten denselben Wert, reicht eine Angabe (z. B. "margin: 20px;" bewirkt, das auf allen 4 Seiten ein Abstand von 20px eingehalten wird)

Soll für oben/unten und rechts/links derselbe Wert definiert werden, ist die Schreibweise "margin:20px 35px;" - 20px für oben/unten, 35 px rechts/links

In der verkürzen können auch alle 4 Seiten definiert werden: "margin:20px 35px 15px 60px;" - 20px für oben, 35 px rechts, 15px unten, 60px links - gelesen wird wie die Uhrzeit, man fängt oben an.

Die verkürzte Schreibweise funktioniert sowohl für

  • margin
  • padding
  • border

vorheriges Kapitel: Box-Modell
nächstes Kapitel: CLASS und ID
Box-ModellSeitenanfangCLASS und ID
eBook HTML-Seminar.de
del.icio.usMister Wong         Box-ModellSeitenanfangCLASS und ID
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de