Boxmodellen
En illustration av skillnaden mellan marginal och padding
Box-modellen är det bästa sättet att beskriva ett XHTML-elements olika ytbegränsningar eller områden. I box-modellen ingår huvudelementet (exempelvis p, div, table m.m) som kan formateras med kantlinjer, marginaler och padding m.m. Det här styckets placering i förhållande till rubriken nedanför skulle exempelvis kunna förklaras med en boxmodell.
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.
Några 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.
