Förståelse av boxmodellen på ett praktiskt sätt

Varje element på en webbsida renderas som en rektangulär ruta. Varje ruta består av fyra delar:

• Innehåll: den faktiska texten eller elementen;
• Utfyllnad: utrymme inuti elementet;
• Ram: omger innehåll och utfyllnad;
• Marginal: utrymme utanför elementet.

Visuell struktur

Marginal → Ram → Utfyllnad → Innehåll. Den totala storleken på ett element beror på alla dessa delar.

Innehåll

Den synliga delen av elementet: text, bilder eller andra element.

Padding (Inre utrymme)

Skapar utrymme mellan innehåll och kantlinje.

.box {
  padding: 20px;
}

Förkortad syntax

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 */

Marginal (Yttre utrymme)

Skapar utrymme mellan element.

.box {
  margin: 20px;
}

Förenklad syntax

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

Ram

Definierar elementets kant.

.box {
  border: 4px solid darkblue;
}

Viktig skillnad

• Padding → inre utrymme (påverkar bakgrund);
• Margin → yttre utrymme (påverkar INTE bakgrund).

Box Sizing

Styr hur bredd och höjd beräknas.

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

• content-box: padding + border läggs till storleken;
• border-box: allt ingår i storleken.

I verkliga projekt föredras border-box.