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>

Links

, , , ,