CSS-Lernpfad - Box-Modell

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.

Begriffe

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

#1

<html> <iframe src=„https://learningapps.org/watch?app=5701530“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>

Inhaltsbereich

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.

#2

<html> <iframe src=„https://learningapps.org/watch?app=5701484“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>

Innenabstand

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



Rahmen

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



Außenabstand

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.



#3

<html> <iframe src=„https://learningapps.org/watch?app=5706584“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>

#4

Gesamtbreite

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

#5

<html> <iframe src=„https://learningapps.org/watch?app=5706469“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>

#6

Um die unten angeführte Learningapp bearbeiten zu können, musst du folgenden Link aufrufen: https://thimbleprojects.org/jonathanpf/560287


<html> <iframe src=„https://learningapps.org/watch?app=5701822“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>

#7

Wiederholung zu CSS

<html> <iframe src=„https://learningapps.org/watch?v=p6it8umi317“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>

Links

, , , ,