html - div block 的底部边距不生效

Question

我有几个嵌套的 div block ，我的问题是最后一个 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;
}

Answer 1

您的问题是由计算此元素的边距的方式引起的 - 它指的是其 sibling 的位置，而不是父元素的位置。

您可以为其他包含“TITLE”文本的 div 设置边距，并看到与 margin-top 相同的问题。

编辑:您可以添加 <div style="width: 100%; height: 1px;"></div>在 <div class="left_navigation_container"></div> 之后触发底部边距并使其可见。