The bottom edge of the div block is not valid

Question

I have several nested div blocks, and my problem is that the last left_navigation_container does not have a left_navigation_container interval in the bottom field, and I'm not sure why ( jsfiddle ).

HTML:

 <div class="left_navigation_outer"> <div class="left_navigation_header_outer"> <div class="left_navigation_header_logo"> <strong>Title</strong> </div> </div> <div class="left_navigation_container"> </div> </div> 

CSS

 div.left_navigation_outer { background: green; background-repeat: repeat; margin:10px; -moz-box-shadow: 0px 0px 5px #ababab; -webkit-box-shadow: 0px 0px 5px #ababab; box-shadow: 0px 0px 5px #ababab; } div.left_navigation_header_outer { background: blue; background-repeat: repeat; height: 50px; border-top: 4px solid black; } div.left_navigation_header_logo { line-height:50px; color: #efefef; text-shadow: 0 -1px #000; text-align: center; text-transform: uppercase; } div.left_navigation_container { background: red; background-repeat: repeat; height: 50px; margin: 7px; } 

Answer 1

Your problem is caused by the way the field is calculated for this element - this applies to its siblings, and not to the parent position.

You can set the margin for another div containing the text "TITLE" and see the same problem with margin-top.

EDIT: you can add <div style="width: 100%; height: 1px;"></div> after <div class="left_navigation_container"></div> to invoke the bottom margin and make it visible.

Answer 2

You can fix this by specifying div.left_navigation_outer a padding-bottom

Answer 3

Strange ... I don’t know why, but if you add a 1px bottom layer to div.left_navigation_outer , it will fix it - here is my plug of your violin

 div.left_navigation_outer { background: green; background-repeat: repeat; margin:10px; -moz-box-shadow: 0px 0px 5px #ababab; -webkit-box-shadow: 0px 0px 5px #ababab; box-shadow: 0px 0px 5px #ababab; padding-bottom:1px; /* tricky hack to get the bottom spacing */ }