Why does my field border affect content / block INSIDE?

Question

I have the following:

<div> <p>some content</p> </div> 

or

 <div> some content </div> 

Without:

 <p>some content</p> 

... the layout of the div is different. It seems that the block content of the INSIDE div affects the outer (top) edge of the div. So what is a corpse? I would think that the contents inside the div, like the block, will not affect the allowable margin of the block. Why does the div border depend on the content inside it?

Answer 1

You are talking about folding fields .

See: http://jsfiddle.net/thirtydot/vgJxX/

You can "fix it" by adding a parent element:

• A border .
• Some padding .
• position: absolute .
• float: left .

HTML:

 <div> <p>I'm doing the "broken" thing you hate.</p> </div> <div id="d2"> <p>I'm not!</p> </div> <div id="d3"> <p>Neither am I!</p> </div> <div id="d4"> <p>Me neither!</p> </div> 

CSS

 div { background: #ccc } p { margin: 20px 0 } #d2 { border: 1px solid red } #d3 { padding: 1px } #d4 { position: absolute; bottom: 0; width: 100% } 

Answer 2

Due to margin reversal . Add a border or padding to your div .