Divne chovani bloku s a bez border

Dobry den,
vezmeme to hned prikladem:
Mam stranku s 3 divy (tj. bloky):

<div class="clr">zdarec</div>

<div class="clg"><p>zdarec</p></div>

<div class="clb">zdarec</div>

p { background: yellow }

V prostrednim divu je zase dalsi blok (odstavec p). Jak vime, tak odstavec ma v HTML nastaveny margin top a margin bottom na nejakou hodnotu ala 1em.

Nyni spustim toho html s nasledujicim stylem:

.clr { background: red }

.clg { background: green; border: 1px solid red; }

.clb { background: blue }

p { background: yellow }

Vse vypada normalne, dle ocekavani, bloky div na sebe primo navazuji, kolem odstavce p je margin, ktery je uvnitr prostredniho (zeleneho) divu:

odkaz

Problem nastane, pokud odstranim okraje z textu, tj. cast border: 1px solid red; pak styl vypadaji takto:

.clr { background: red }

.clg { background: green }

.clb { background: blue }

p { background: yellow }

A zde je prave kamen urazu. Najednou se margin odstavce jakoby dostanou ven z prostredniho divu a zelene pozadi je to tam a vznikne prazdna mezera :-( :

odkaz

Muze mi prosim nekdo vysvetlit, proc se tomu tak deje, a jak se tomu vyhnout nejakym jednoduzsim zpusobem, nez vsude pridavat border?

Dekuji za reakci, ale mne jde spise o to, jak to zapsat elegantne a nemenit pri tom vlastnosti odstavce (tagu <p>) (a vsech ostatnich html tagu, co maji definovany margin). Ty tagy ala <p> rozhodne v prostredni casti budu pouzivat, jako klasicky odstavec atd. Proste uvnitr bude normalni text, ala clanky, komentare apod.. Nez tohle, to si radsi opravdu budu psat vsude ty bordery.
Me spise zajima proc to tak je, jestli neni nejaky jiny zpusob, jak donutit blok k tomuto chovani (tj. jako kdyz se mu daji border - tj. margin bloků v něm obsažených bude skutečne uvnitř a ne vně). Neco jako display: full-block; :-).

ash721: Jo, padding je mnohem lepší řešení, protože nemusím slaďovat barvu pozaní s barvou borderu. Dík, to použiji.

Přesto to neni 100% řešení, někdy třeba padding nechci. Ale to 100% řešení asi neexistuje, jinak už by ho sem asi někdo napsal.

Stejně, jsem takovej typ, co rád ví, proč věci jsou tak jak jsou, takže kdyby mi někdo dokázal vysvětlit, proč blok bez borderu/paddingu vypouští margin vnitřního bloku ven, budu rád.

Plaváček:
Dík, tam je všechno vysvětlené. nakonec i v tom standardu w3c jsem to našel, přímo kapitola collapsing-margins

Prostě až na zmíněné vyjímky (border, padding, float a další) se spojují margin-top a bottom přiléhajících bloků, kde daný margin-tom/bottom je max i z bloků obsažených uvnitř bloku. V mém případě se tedy vezme větší z margin-top odstavce p, a divu .clg a to se spoji s marigin-bottom prvniho divu (.clr).

Chápu proč to tak je (z hlediska rozumného automatického umísťování bloků pod sebe je to prakticky nutnost), ale mrzí mně že při vytváření standardu je nenapadlo myslet na to, že je tu potřeba to někdy explicitně vypnout (něco jako už jsem navrhoval "display: full-block")