Willkommen zum nächsten Teil meiner Kursreihe! Bisher haben wir gelernt, wie wir Texte gestalten und Farben setzen. Heute schauen wir uns an, wie viel Platz die einzelnen Elemente auf einer Webseite eigentlich einnehmen.
In CSS ist jedes Element – egal ob es ein Text, ein Bild oder ein Button ist – im Grunde eine rechteckige Box. Das zu verstehen ist der Schlüssel, um Layouts zu bauen, die nicht nur gut aussehen, sondern auch barrierefrei und übersichtlich sind.
Das Box-Modell anschaulich erklärt: Das „Bild an der Wand“
Stellen Sie sich vor, Sie hängen ein gerahmtes Foto an eine Wand. Das Box-Modell besteht aus vier Schichten, genau wie dieses Bild:
- Der Inhalt (Content): Das ist das eigentliche Foto selbst. In CSS ist das dein Text oder dein Bild.
- Der Innenabstand (Padding): Das ist wie ein Passepartout (der weiße Papprahmen) innerhalb des Bilderrahmens. Er sorgt dafür, dass das Foto nicht direkt am Holzrahmen klebt.
- Der Rahmen (Border): Das ist der hölzerne Bilderrahmen selbst. Er umschließt das Foto und das Passepartout.
- Der Außenabstand (Margin): Das ist der leere Platz an der Wand zwischen deinem Bild und dem nächsten Möbelstück oder dem nächsten Bild.
„CSS lernen leicht gemacht: Das Box-Modell (Abstände und Rahmen)“ weiterlesen