Forståelse af Box-Modellen på en Praktisk Måde

Hvert element på en webside gengives som en rektangulær boks. Hver boks består af fire dele:

• Indhold: den faktiske tekst eller elementer;
• Polstring: plads inden i elementet;
• Kant: omgiver indholdet og polstringen;
• Margin: plads uden for elementet.

Visuel struktur

Margin → Kant → Polstring → Indhold. Den samlede størrelse af et element afhænger af alle disse dele.

Indhold

Den synlige del af elementet: tekst, billeder eller andre elementer.

Polstring (Indre afstand)

Skaber afstand mellem indhold og kant.

.box {
  padding: 20px;
}

Korthåndsnotation

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Margin (Ydre afstand)

Skaber afstand mellem elementer.

.box {
  margin: 20px;
}

Forkortet notation

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Kantlinje

Definerer elementets kant.

.box {
  border: 4px solid darkblue;
}

Væsentlig forskel

• Polstring → indvendig afstand (påvirker baggrund);
• Margin → udvendig afstand (påvirker IKKE baggrund).

Box Sizing

Styrer, hvordan bredde og højde beregnes.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + border lægges til størrelsen;
• border-box: alt er inkluderet i størrelsen.

I praksis foretrækkes border-box.