我有几个嵌套的 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;
}
最佳答案
您的问题是由计算此元素的边距的方式引起的 - 它指的是其 sibling 的位置,而不是父元素的位置。
您可以为其他包含“TITLE”文本的 div 设置边距,并看到与 margin-top 相同的问题。
编辑:您可以添加 <div style="width: 100%; height: 1px;"></div>
在 <div class="left_navigation_container"></div>
之后触发底部边距并使其可见。
关于html - div block 的底部边距不生效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14278906/