boks modellen, hvad er det jeg ikke har forstået?

Så længe din DOCTYPE ikke er det absolut første i dit dokument vil browseren gå i quirksmode og så kan du ikke forvente at boksmodellen vil spille. http://www.web-dev.dk/post/DOCTYPE-og-valid-kode-ens-udseende-i-Internet-Explorer-og-FireFox.aspx

Så vidt jeg ved afhænger det af browseren, men hvad enten jeg har ret eller ej, har jeg lige prøve at fjerne xml doctypen og det har ikke gjort nogen forskel.

Som dine test viser, er det netop vigtig at man altid bruger en reset css så man selv kan styre hvordan det skal se ud og ikke lade en browser bestemme det.

Det er jeg sådan set enig i, men jeg kan ikke lige se hvordan dette er relevant i forhold til det nuværende problem.

Boksen bliver ganske enkelt visualiseret forskelligt, afhængig af om der er borders på, eller ej. Jeg har bevidst lavet borderen transparent i dette eksempel for at slå fast at borderen i sig selv, ikke har noget med problemet at gøre, men blot er en løsnings model. Jeg mener i midlertid at det er en kluntet løsning der ikke burde være nødvendig. Og så ser vi jo også, i eksemplerne med fast højde, hvor kontrollen helt forsvinder.

border-tbottom?

Den er vist ny ...

tbottom skulle være fikset nu ;)

Skal til at på arbejde, men slynger lige en reminder ud først.
sandt nok, så var der en typo, men den er fikset og det søste altså ikke problemet.

Det er en interessant problemstilling du demonstrerer, men jeg kan desværre ikke komme med en forklaring.

Hvis man ser på det i f.eks Chrome eller Firefox og højreklikker og tager punkt "Inspect Element", får man mange gode informationer i de forskellige menuer til højre.
Jeg kan bare ikke få øje på den afgørende forskel

Det er tydeligt at det er <P>s indbyggede top og bund-margin, der gør udslaget:
Browseren skal beslutte om top-margin skal ramme indenfor din <div>,
så det er åbenbart afgørende, hvor "visuel" denne div er.

Måske bliver effekten af <P>s margin endnu tydeligere i Inspect Element, hvis du tilføjer en <P> nummer to i Div'en: Så skal browseren beslutte at disse top- og bund-marginer skal overlappe, så der ikke kommer dobbelt linieafstand.

Men jeg undrer mig over at <P>s margin ikke i alle tilfælde falder indenfor <div>:
Størrelse 100x100 med baggrundsfarve, burde da være nok til at div'en bliver et renderet element?

Kig på begrebet collapsing margins - det kan blandt andet læses hos W3 under netop box modellen her; http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Et par andre, måske, nyttige links;
http://www.howtocreate.co.uk/tutorials/css/margincollapsing
http://reference.sitepoint.com/css/collapsingmargins
http://complexspiral.com/publications/uncollapsing-margins/

keysersoze: Dine links forklarer problemet helt, og det nævnes også at mange er blevet "snydt" af dette.

Jeg synes nu også, at det er helt ulogisk at en DIV med margin = 0px skal collapse med sin childNode og derved få hele P's margin.

netop - så jeg lægger et svar når nu spørger har fået det opklaret :)