Das Box-Modell

Arbeitsauftrag

Erstelle mit dem Tag <div> einen Bereich mit Text, färbe den Hintergrund und lege Innen-und Außenabstände dieses Bereichs fest.

Theorie: Das Boxmodell

Wenn die Hintergrundfarben, Rahmen und Abstände zeichnen willst, ist es wichtig das Box-Modell von HTML / CSS zu verstehen:

Jedes Tag wird entweder inline dargestellt oder als Block.

Inline und Block-Elemente

Du kannst die Eigenschaft umstellen mit dem Attribut display .

Beispiel:

Ein link wird normalerweise inline im Text dargestellt. Wenn dieser als Block modelliert werden soll (z.B. weil er wie ein Button aussehen soll, dann musst du folgendes schreiben:

a {
    display: block;
}

Besser siehst du dies, wenn du dem Link einen Rahmen gibst:

a {
    display: block;
    border: 1px solid black
}

Dies sieht so aus:

Ein Link

Als Block nimmt

Blöcke und Abstände

Ein Block kann über Inhalt, Rahmen und Abstände definiert werden:1573465342433

Margin

Legst die außenabstände fest.

Beispiele:

margin: 10 px;
margin-left: 5px;

Border

Legt den den Rahmen fest, z.B. für einen Rahmen der Dicke 1 px in schwarz:

border: 1px solid black;

Es gibt ziemlich viele zusätzliche Attribute zum Gestalten von Rahmen: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Rahmen

Padding

Legt die Innenabstände fest.

Beispiele:

padding: 10 %;
padding-right: 5px;

Diese Eigenschaften funktionieren nur bei Elementen mit der Eigenschaft display : block!