====== Box-Modell ====== Eine HTML-Webseite besteht aus rechteckigen Kästchen (Box). **Alle** Texte und Grafiken einer Webseite liegen in solchen Kästchen oder Boxen. \\ Alle Boxen sind nach einem bestimmten Schema aufgebaut; das Box-Modell genannt wird.\\ Die Abbildung zeigt eine schematische Darstellung des Box-Modells.\\ \\ {{:informatik:html-css:css-box-modell.png?538|}} Fast alle HTML-Elemente haben die **Eigenschaften** width, height, padding, border und margin.\\ ^ Englisch ^ Deutsch ^ | content | Inhalt | | width | Breite | | padding | Innenabstand, Polsterung | | border| Rahmen | | margin | Außenabstand, Rand | Text und Grafiken stehen im **Inhaltsbereich** eines Elements, dessen Breite mit width und dessen Höhe mit height definiert wird. Wenn diese Angaben nicht explizit im Stylesheet auftauchen, gelten die folgenden Grundregeln:\\ * Ohne Angabe von ''width'' werden Block-Elemente so breit wie das umgebende Element. * Ohne Angabe von ''height'' werden alle Elemente nur so hoch wie ihr Inhalt. Beachte, dass ''width'' die Breite des Inhaltsbereichs definiert, und nicht die Gesamtbreite des Elements. \\ \\ {{:informatik:html-css:css-box-modell.png?538|}} Nach dem Inhaltsbereich folgt in jeder Box der Innenabstand (''padding''). Das padding liegt innerhalb der Box und übernimmt die Hintergrundfarbe des Inhaltsbereichs. \\ \\ **Der Innenabstand ist ein erzwungener Leerraum zwischen dem Inhaltsbereich (content) eines Elements und seinem Elementrand.**\\ \\ ''padding'' kann für alle vier Seiten einer Box einzeln definiert werden. Die Eigenschaften heißen dann wie folgt: * ''padding-top'' für den oberen Innenabstand * ''padding-right'' für den rechten Innenabstand * ''padding-bottom'' für den unteren Innenabstand * ''padding-left'' für den linken Innenabstand \\ \\ {{:informatik:html-css:css-box-modell.png?538|}} Um das padding legt sich der Rahmen (''border''), der Rand der Kiste, der eine eigene Breite (width), Linienart (style) und Farbe (color) annehmen kann.\\ Auch ''border'' kann für alle vier Seiten unterschiedlich sein. Die Eigenschaften heißen dann: * ''border-top'' für die Rahmenlinie oben * ''border-right'' für die rechte Rahmenlinie * ''border-bottom'' für die untere Rahmenlinie * ''border-left'' für die linke Rahmenlinie \\ \\ {{:informatik:html-css:css-box-modell.png?538|}} Jede Box kann einen Außenabstand (''margin'') haben, der ebenfalls für alle vier Seiten einzeln definiert werden kann: * ''margin-top'' für den oberen Außenabstand * ''margin-right'' für den rechten Außenabstand * ''margin-bottom'' für den unteren Außenabstand * ''margin-left'' für den linken Außenabstand **Der Außenabstand (''margin'') ein erzwungener Leerraum zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen.**\\ \\ Der Außenabstand übernimmt die Hintergrundfarbe des umgebenden Elements. \\ \\ {{:informatik:html-css:css-box-modell.png?538|}} Auf den ersten Blick ungewöhnlich ist die Berechnung der **Gesamtbreite** einer Box. ''width'' heißt zwar »Breite«, damit ist aber wie erwähnt nicht die Gesamtbreite der Box gemeint, sondern die Breite des Inhaltsbereichs.\\ \\ Zur Erklärung ein Beispiel, dem folgende CSS-Regel zugrunde liegt:\\


div {
  width: 720px;
  padding: 20px;
  border: 0;
  margin: 10px;
}

\\ Die Gesamtbreite der Box setzt sich aus width, padding, border und margin zusammen: ^ Berechnung ^ Beispiel ^ | width | 720px | | + padding-right | + 20px | | + padding-left | + 20px | | + border-right-width | + 0 | | + border-left-width | + 0 | | + margin-right | + 10px | | + margin-left | + 10px | | = Gesamtbreite der Box | = 780px | **Wiederholung zu CSS**\\ \\ * [[https://little-boxes.de/lb1/7.2-das-box-modell-in-der-uebersicht.html]]