Html div块的下边缘未生效

我有几个嵌套的

div

块，我的问题是最后一个

left\u navigation\u container

在底部空白处没有7px的间距，我不知道为什么（）

HTML:

---

您可以通过给

div.left\u navigation\u outer

一个

填充底部

来解决这个问题。。。不知道为什么，但如果您在

1px
div.left\u navigation\u outer
中添加一个填充底部，它会修复它-这是我的

您的问题是由计算此元素的边距的方法引起的-它指的是它的兄弟元素，而不是父元素的位置

您可以为包含“TITLE”文本的其他div设置边距，并查看边距顶部的相同问题

编辑：您可以在
之后添加
，以触发底部边距并使其可见
 我想到了这一点，但当我应用填充时，
left\u navigation\u container
的边距会生效，因此我得到了实际需要的两倍空间。我可以去掉下边距，但我有点想知道为什么会发生这种情况。啊-用
填充下边距
的想法击败我，我无法确切解释为什么会发生这种情况。但这种情况时有发生，而且每次都解决了。我能得到一个解释为什么否决票吗？我看我的答案没有错。@sooper您可以通过在底部添加
填充：0.1px如果在底部添加一个像素，让它自行修复，我会感到非常不舒服。我认为最好在底部添加一个5px的填充，并从
左侧导航\u容器中删除5px的边距。但我仍然想知道为什么会发生这种情况。我同意知道为什么事情会以这种方式发生总是很好的，所以你的编程不是巧合。老实说，我不确定，我只是“摆弄”直到我得到底部间距！
<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>

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;
}

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 */
}