html – div块的下边距未生效

我有几个嵌套的div块,我的问题是最后一个left_navigation_container在底部边缘没有7px间距,我不知道为什么( 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;
}

解决方法

你的问题是由计算这个元素的边际的方式引起的 – 它指的是它的兄弟姐妹,而不是父母的位置.

您可以为包含“TITLE”文本的其他div设置边距,并在margin-top中查看相同的问题.

编辑：您可以添加< div style =“width：100％; height：1px;”>< / div>在< div class =“left_navigation_container”>< / div>之后触发底部边距并使其可见.