padding-top: 50px; | margin-top: 50px; | reset

Hold øje med browservinduets lodrette scrollbar!

Margin og padding

margin er et mål for et felt uden om en elementboks, nemlig det felt der forskyder boksen i forhold til det foregående element eller den omgivende boks.

padding er et mål for et felt inden i en elementboks, nemlig det felt der er imellem boksens indhold (tekst eller andet) og dens ydre kant.

Ifølge CSS box-modellen skal både margin og padding dog regnes med i boksens samlede mål. Ikke alle browsere opfatter dette korrekt, se vedrørende CSS boksmodellen i IE5 på disse sider.

Men forskellighederne hører ikke op her, for i Gecko browserne (der ellers er kendt for at følge CSS standarderne strengere end Internet Explorer) bliver et elements margin også tillagt den omgivende boks. Det ses her ved hjælp af den røde boks. Når man klikker på det første link, tillægges boksen 50px padding i toppen. Når man klikker på det andet link, tillægges den i stedet 50px margin. De 50px margin-top resulterer i at højden på det omgivende <body> element bliver tilsvarende mere end de 100% den er defineret til i denne sides stylesheet. Det ses ved at browservinduets lodrette scrollbar ændrer position, eller i det hele taget kommer til syne (Gecko browsere). Det samme sker ikke når det er padding der tillægges.

Internet Explorer opfører sig ikke på denne måde. Er det for engang skyld denne browser der følger CSS reglerne, og Gecko der ikke gør?