我刚从老师那里学到了一个新的“css hack”.但他不知道为什么会这样.
我会解释一下：
我会解释一下：
灰色的是导航元素,黑色是一个div,其中包含p-tag“some content”,由于他的边缘而产生这个差距. (我会在问题的最后发布代码).
我的解决方案就是删除保证金.但我的老师用另一种方式告诉了我.他补充说：溢出：隐藏;对于包含p和poff的div,差距消失了.
但这怎么可能呢？为什么溢出会影响元素的边距？
这是一个示例代码加上一个codepen演示：
http://codepen.io/anon/pen/JdQaYv
.container,.header,.content{
margin 0;
padding: 0;
}
.container{
background; green;
}
.header{
background: red;
}
.content{
background: yellow;
}
.overflow{
overflow: hidden;
}
<div class="container">
<div class="header">
Header
</div>
<div class="content">
<p>Contentcontent</p>
</div>
</div>
___________________________________________
<br />
<div class="container">
<div class="header">
Header
</div>
<div class="content overflow">
<p>Contentcontent</p>
</div>
</div>
解决方法
浏览器总是将边距与附近的边距折叠起来.当你给出一个溢出：隐藏时,它会计算它的盒子模型中的所有内容并使其限制在内容中.
BoltClock和其他任何人的解释.抱歉我的快速脏手写……
浮子的情况也是如此.浮动物品不占用任何空间.看看这里：
div {padding: 5px; border: 1px solid #666;}
<div> <div style="float: left;"></div> </div>
但同样的事情,如果父母有溢出：隐藏它不会发生：
div {padding: 5px; border: 1px solid #666;}
<div style="overflow: hidden;"> <div style="float: left;"></div> </div>
这里有一篇关于这个概念的大文章：What You Should Know About Collapsing Margins.溢出是一个如此强大的属性,它适用于一切.但是当涉及到位置时,你需要仔细使用它！
这个位置就像浮动一样,两者都不采用布局.例如,请参阅以下代码段：
div {padding: 5px; border: 1px solid #666;}
<div> <div style="position: absolute;"></div> </div>
如果你以错误的方式玩它：
div {padding: 5px; border: 1px solid #666;}
<div style="overflow: hidden; position: relative;"> <div style="position: absolute;"></div> </div>
