Box-Modell
Box-Modell
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 |
Aufgabe #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.
Aufgabe #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 Innenabstandpadding-right
für den rechten Innenabstandpadding-bottom
für den unteren Innenabstandpadding-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 obenborder-right
für die rechte Rahmenlinieborder-bottom
für die untere Rahmenlinieborder-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ßenabstandmargin-right
für den rechten Außenabstandmargin-bottom
für den unteren Außenabstandmargin-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.
Aufgabe #3
<html> <iframe src=„https://learningapps.org/watch?app=5706584“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>
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 |
Aufgabe #4
<html> <iframe src=„https://learningapps.org/watch?app=5706469“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>
Aufgabe #5
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>