Question

我刚从老师那里学到了一个新的“css hack”。但他不知道为什么会奏效我会解释一下：

我在我的网站上有一个我不想出现的间隙（绿线）：

灰色的是nav元素，黑色是一个div，其中包含p-tag“some content”，由于他的边缘而产生这个间隙。（我会在问题的最后发布代码。）

我的解决方案就是删除保证金。但我的老师用另一种方式告诉了我。他将overflow: hidden;添加到包含p的div和poff中，差距消失了。

但这怎么可能？为什么溢出会影响元素的边距？

这是一个示例代码加上一个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>

Answer 1

浏览器总是将边距与附近的边距折叠起来。当您提供overflow: hidden时，它会计算其框内模型中的所有内容，并将其限制在内容中。

BoltClock及其他任何人的说明。 对我的快速脏手写感到抱歉......

这也是float的情况。浮动物品不占用任何空间。看看这里：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div>
  <div style="float: left;"></div>
</div>

＆＃13;

但同样的事情，如果父母有一个overflow: hidden，它就不会发生：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div style="overflow: hidden;">
  <div style="float: left;"></div>
</div>

＆＃13;

这里有一篇关于这个概念的大文章：What You Should Know About Collapsing Margins。 overflow是一个强大的属性，它适用于一切。但是当谈到position时，你需要仔细使用它！

position的工作方式与float类似，两者都不采用布局。例如，请参阅以下代码段：

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div>
  <div style="position: absolute;"></div>
</div>

＆＃13;

如果你以错误的方式玩它，那么

＆＃13;

div {padding: 5px; border: 1px solid #666;}

＆＃13;

<div style="overflow: hidden; position: relative;">
  <div style="position: absolute;"></div>
</div>

＆＃13;

以上内容被删除。希望很清楚。

Answer 2

overflow: hidden导致容器元素建立block formatting context，阻止父子边缘崩溃（尽管没有其他形式的边缘崩溃）。 collapsing margins：

部分明确提到了这种效果

建立新的块格式化上下文的元素的边距（例如浮点数和'溢出'而不是'可见'的元素）不会因其流入的子节点而崩溃。

因此，p元素的边距不会从其父元素的内容框中渗出。

如果您绝对不希望p元素周围有任何边距，则会删除或清零边距。阻止p元素及其父元素之间的边距折叠不会从任一元素中删除边距。

为什么溢出清晰的p-tag边缘

2 个答案: