Boxmodellen

CSS-guide

Artiklar

I den här artikeln går vi igenom skillnaderna mellan marginaler och padding med boxmodellen som hjälpmedel.

Vad är boxmodellen?

Boxmodellen är det bästa sättet att beskriva ett XHTML-elements olika ytbegränsningar eller områden. I box-modellen ingår huvudelementet - exempelvis en stycketagg eller div-behållare och som kan formateras med kantlinjer, marginaler, padding osv.

Illustration av boxmodellen

UTSIDA: Marginalen skapar avstånd mellan denna box och andra boxar och placerar innehållet där vi vill ha det.

INSIDA: Padding skapar avstånd mellan gränslinje och huvudelementet.

HUVUDELEMENT: Det vita fältet representerar det minsta utrymme som exempelvis ett stycke p kan ta upp.

PADDING

MARGINAL

Fler förklarande exempel:

Om du väljer att ett stycke ska ha en kantlinje, som det här stycket har, så kommer kantlinjen att motsvara den tjocka svarta linjen i illustrationen. Det här stycket har ingen padding - däremot har det marginaler. Det är marginalerna som skapar avstånden till andra boxar, till exempel skapas ett avstånd till underliggande stycke med en bottenmarginal på 20 pixlar.

Det här stycket har både marginaler och padding. Om du tittar noggrant så ser du att paddingen gett stycket lite avstånd från kantlinjen.

Om du väljer att ge stycket en annan bakgrundsfärg så kommer paddingen att tillhöra den bit som skall färgas, medan marginalen inte påverkas. Marginalen tillhör således utsidan medan paddingen tillhör insidan.

<<< Padding || Display >>>