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

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)