Das css box-Modell

  1. Theorie

Das css box-Modell Im visuellen Anzeigemodell erfolgt die Darstellung von Elementen durch das Zeichnen von Rechtecken. Die Bestandteile dieser Rechtecke beschreibt das „Box-Modell“. Eine Box kann bestehen aus:

  • Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird,
  • einem Innenabstand (padding),
  • einem Rahmen (border) und
  • einem Außenabstand (margin).

Bei Blockelementen können Höhe und Breite beliebig festgelegt werden, bei Inlineelementen werden die Maße durch den Inhalt vorgegeben.

Innen- und Außenabstände sowie Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden.

Wird eine Box positioniert, beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom.

Hintergrundbilder und -farben werden, falls mithilfe von background-clip nichts Gegenteiliges festgelegt wurde, in den Bereichen des Inhalts, des Innenabstands und des Rahmens gezeichnet. Ein Rahmen verdeckt jedoch den Hintergrund, so dass dieser nur dann sichtbar ist, wenn der Rahmen teilweise durchsichtig ist (z.B. beim gestrichelten Rahmenstil). Die Außenabstände sind immer vollständig transparent.

Beachten Sie: Der Begriff „Box“ ist nicht mit dem Begriff „Element“ gleichzusetzen. Nicht jedes Element erzeugt eine Box, aber Boxen können auch erzeugt werden, wenn in einem Dokument kein Element als direktes Gegenstück existiert.

 Boxmodell-detail.png

Die einzelnen Rechtecke werden von innen nach außen bezeichnet als

  • content-box
  • padding-box
  • border-box
  • margin-box

 

2.Praxis

Jetzt wollen wir das Ganze mal am praktischen Beispiel betrachten.  Wir nehmen folgende index.html:

Gegeben sei die folgende Index.html :

<html>
<head>
<meta http-equiv=“Content-Language“ content=de“>
<meta charset=“UTF-8″>
<title>Seitentitel</title>
<meta name=“description“ content= “ Seitenbeschreibung“ />
<link rel=“stylesheet“ type=“text/css“ href=“style.css“/>
</head>
<body>

<div id=’inhalt‘>
<div id =“text“>
Dies ist Fülltext:„Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that’s what you see at a toy store. And you must think you’re in a toy store, because you’re here shopping for an infant named Jeb.“

</div>

</div>
</body>
</html>

Es ist hier unschwer zu erkennen, dass in den Kontainer  „inhalt“ der Kontainer „text“ geschachtelt ist.

Wir erstellen eine zugehörige style.css- Datei:

#inhalt {
width:500px;
height:500px;
background-color: red;
margin-left:120px;
position:absolute;

}

#text {
padding-top:20px;
padding-left:20px;
padding-right:20px;
border: 10px solid #00501f;
width:400px;
height:400px;
background-color: blue;
margin-top:10px;}

Die Darstellung im browser sieht dann wie folgt aus:

geschachtelt1

Wie man sieht liegt der text-Kontainer im Inhalt-Kontainer. Dies ist wegen „position absolute“ möglich.

 

 

 

 

Möchte man den text innerhalb des Kontainers einrücken so macht man das mit padding (left, top, right und bottom).

Das Ergebnis sieht dann für jeweils 30px einrücken so aus:

die style.css

#inhalt {
width:500px;
height:500px;
background-color: red;
margin-left:120px;
position:absolute;
}

#text {
padding-top:30px;
padding-left:30px;
padding-right:30px;
border: 10px solid #00501f;
width:400px;
height:400px;
background-color: blue;

}

der browser:

 

Bipadding

Man kann deutlich erkennen, dass der Text innerhalb des Kontainers eingerückt ist.

 

 

 

 

Um jetzt noch den gesamten Textblock innerhalb des Kontent-blocks zu verändern benötigt man das „margin“

Nur margin eingeben geht auch. Hier „margin:10px“

 

Die style.css

#inhalt {
width:500px;
height:500px;
background-color: red;
margin-left:120px;
position:absolute;
}

#text {
margin:10px;
padding-top:30px;
padding-left:30px;
padding-right:30px;
border: 10px solid #00501f;
width:400px;
height:400px;
background-color: blue;

}

Ansicht im browser:

margin

Übrigens: das „margin-left:120px“ beim inhalt zeigt uns,  dass dasselbe für die nächste box auch wieder gilt!