Forståelse av Bokmodellen på en Praktisk Måte

Hvert element på en nettside gjengis som en rektangulær boks. Hver boks består av fire deler:

• Innhold: selve teksten eller elementene;
• Polstring: plass inne i elementet;
• Ramme: omgir innholdet og polstringen;
• Marg: plass utenfor elementet.

Visuell struktur

Marg → Ramme → Polstring → Innhold. Den totale størrelsen på et element avhenger av alle disse delene.

Innhold

Den synlige delen av elementet: tekst, bilder eller andre elementer.

Padding (Indre mellomrom)

Oppretter mellomrom mellom innhold og kantlinje.

.box {
  padding: 20px;
}

Kortform

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 (Ytre mellomrom)

Oppretter mellomrom mellom elementer.

.box {
  margin: 20px;
}

Forkortet skrivemåte

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

Kantlinje

Definerer kanten til elementet.

.box {
  border: 4px solid darkblue;
}

Viktig forskjell

• Padding → innvendig mellomrom (påvirker bakgrunn);
• Margin → utvendig mellomrom (påvirker IKKE bakgrunn).

Box Sizing

Styrer hvordan bredde og høyde beregnes.

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

• content-box: padding + border legges til størrelsen;
• border-box: alt inkludert i størrelsen.

I faktiske prosjekter foretrekkes border-box.