html - Why does adding a border change the height calculation? -

i have got 2 divcontainers 1 border , 1 without border.
inside both containers got p paragraph margin of 1em.

obviously both container should have same height.
surprisingly not case firefox, chrome, safari, , ie.

fiddle demo

css:

p { display: block; margin: 1em }     

html:

<div>     <p></p> </div>  <div style="border: 1px solid black">     <p></p> </div> 

what's reason behavior?

the first p element's margins collapsing parent div. means margins on p element combining 0 margins on div, causing them cross boundaries of div. result, height of div reported same p child.

in second group of elements, margin collapse prevented when add border. causes parent div contain both p element margins. height of div becomes sum of p element's height , vertical margins.

remember p elements have default vertical margins, , block elements have no fixed height (i.e. height: auto default), they'll tall necessary fit contents. when child's margins collapsing parent's margins, margins not included when calculating parent's height.