Det här är två exakt likadana lådor (samma höjd, bredd, padding och border):
(naturliga storlekar)

Nej jag skojar inte. Jag använder samma css fil till båda och koderna för boxen är identiska.

Så varför blir det så?

Css Specifikationen beskriver hur delar av webbsidor visas av grafiska webbläsare. Avsnitt 4 i CSS1 specifikationen definierar en "formaterings modell" som ger block-element nivåer, som p och blockquote en bredd och höjd, och tre nivåer på fälten som omger den: stoppning (padding, ramar(border) och marginaler(margin).

Innan html4 och css hade väldigt få html element stöd för både padding och border så definitionen av bredden och höjden på ett element var inte mycket omstridd. Däremot varierade de beroende på vilket element det var. Attributer i för bredd på tabbeler var inklusive dess ramlinje medan bilders bredd var på själva elementet innanför ramarna.

När Css kom så infördes padding border och margin för många fler element. Rådet antog en definition bredd i förhållande till innehåll, gräns, marginal och padding liknande den för en tabellcell. Det blev känt som W3C box modellen.

De två största webbläsarna under den tiden, som var Netscape 4.0 och Internet Explorer 4.0, definierade dock bredd och höjd som avståndet till border. Paddning räknades alltså på innanför en lådas ramar.

När standarden för css reviderades 1999 fastlogs att när en bredd eller höjd specificeras för varje block-level element bör den endast fastställa bredden eller höjden på den synliga delen , med stoppning, ramar och marginaler läggs på efteråt. Men i internet explorer 5 så gälde fortfarande att padding räknades från en lådas ramar.

Quirksmode

idag så följer alla webbläsare standardens specifikation om hur padding och borde fungerar. men av kompatibilitets krav så måste de ha kvar det gamla sättet kvar. annars är det en massa sidor som blir oanvändbara. Lösningen var quirksmode. När en webbläsare hamnar i quirksmode så visas sidan enligt IE5.

Om du vill att sidan ska visas lika i alla sidor ska du undvika att hamna i quirksmode. så då måste man ställa frågan om hur man hamnar i quirksmode.

En webbläsare hamnar i quirksmode om:
När dokumenttyps deklaration saknas eller är ofullständig,
När en HTML-3 dokument eller tidigare påträffas;
När en HTML 4.0 Transitional eller Frameset dokumenttyps deklaration används och ett system för identifikation (URI) inte förekommer;
När en SGML-kommentar eller andra oredovisade innehåll visas före dokumenttypsdeklarationen
När det är fel någonstans i dokumentet
Internet Explorer 6 använder även quirks mode om det finns en XML-deklaration före dokumenttyps deklarationen

så vad händer?

i vanliga fall så räknas padding och border på lådans bredd och höjd. Det betyder att om du har en låda som har 200px i bredd och höjd, en ramlinje på 1px runt hela och padding på 10px runt hela så får du 221px i bredd och höjd. Detta är enligt W3C's specifikation.

Men i quirksmode så räknas det som 200px fast du har ramlinje och padding. Det är det du ser på bilderna högst upp.

Så här undviker du quirksmode:

Skriv in en dokumenttyps deklaration högst upp i ditt dokument som är för html 4.01 (ej Transitional eller frameset) eller xhtml i dess olika versioner.

Du kan hämta dessa deklarationer här: http://www.w3.org/QA/2002/04/valid-dtd-list.html.