Dies ist eine alte Version des Dokuments!
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 Innenabstandpadding-right
für den rechten Innenabstandpadding-bottom
für den unteren Innenabstandpadding-left
für den linken Innenabstand
#3
Um die unten angeführte Learningapp bearbeiten zu können, musst du folgeden 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>