CSS Schnellstart – Box Model

Hast du dich eigentlich schonmal gefragt woraus ein HTML-Element im Browser besteht? Browser sehen HTML-Element als Boxen an. In CSS kannst du diese "Boxen" designen und gestalten.

Also jedes HTML-Element, welches du im Browser sehen kannst, ist umgeben von einer Box.

Diese Box ist in etwa so aufgebaut:

Diese Box hat besondere Eigenschaften, die du dir merken solltest (insbesondere die englischen Begriffe):

Eigenschaft	CSS-Begriff	Beschreibung
Außenabstand	margin	Der Abstand zwischen Rand und dem nächsten Element
Rand	border	Der Rand der Elementbox
Innenabstand	padding	Der Abstand zwischen Rand und Inhalt
Inhalt	content	Der Inhalt des Elementes: Text, Bild oder weitere Elemente

Diese Eigenschaften kannst du mit CSS anpassen und gestalten. Wir gehen in diesem Modul durch die wichtigsten Einstellungen durch.

Für dich ist an dieser Stelle wichtig, dass die Größe eines Elementes durch diese Eigenschaften beeinflusst wird. Außerdem kann man das Box Model bei den meisten Elementen nicht direkt sehen.

Mit dieser CSS-Regel kannst du das Box Model eines Elementes leichter erkennen:

.box-zeigen {
  width: 250px;
  background-color: #ADD1F3;
  border: 15px solid #2487D8;
  padding: 50px;
  margin: 20px;
}

Lass uns das mal in Aktion anschauen:

CSS Schnellstart – Box Model

CSS Schnellstart – Modul 2 – CSS Box-Model