为什么溢出清除p-tag的边距 [英] Why do overflow clear margin of p-tag

问题描述

我刚刚从我的老师那里学到了一个新的css hack。但他不知道为什么它工作。

我会解释：

我在我的网站上有一个缺口（绿线）我不想显示：

灰色的一个是nav元素，黑色是包含由于他的边缘而产生这种间隙的p标签一些内容的div。 （我将在问题结尾处发布代码）。

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

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

这里是一个示例代码加上代码演示：

。 overflow 是一个强大的属性，它适用于一切。

position / code>的工作原理像 float ，在两种方式不采取布局。例如，见下面的代码段：

  div {padding：5px; border：1px solid＃666;}  

 < div& < div style =position：absolute;>< / div>< / div>  

b
$ b

其中，如果您以错误的方式玩：

  div {padding：5px; border：1px solid＃666;}  

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

b
$ b

上面的内容被裁剪。希望很清楚。

I just learnt a new "css hack" from my teacher. But he don't know why it works.
I'll explain:

I've on my website a gap (the green line) which I don't want to appear:

the grey one is the nav element, the black is a div which contains the p-tag "some content" which make this gap because of his margin. (I'll post the code at the end of the question).

My solution would be just delete the margin. But my teacher telled me another way. He added overflow: hidden; to the div which contains the p, and poff, the gap is gone.

But how is this possible? Why do overflow affect the margin of an element?

Here's a example code plus a codepen demo:
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> 

解决方案

The browser always collapses the margins with the nearby margins. When you give an overflow: hidden, it calculates all the contents inside it's box model and makes it confine to the content.

Explanation for BoltClock and anyone else. Sorry about my quick dirty handwriting...

This is the same case with floats too. Floated items do not occupy any space. Have a look here:

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

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

But the same thing, if the parent has an overflow: hidden it doesn't happen:

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

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

A whole big article about this concept here: What You Should Know About Collapsing Margins. The overflow is such a powerful property that it works for everything. But when it comes to position you need to use it carefully!

The position works like float, in the way that both do not take the layout. For eg., see the below snippet:

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

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

Where, if you play with it in the wrong way:

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

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

The contents above get cut. Hope it is clear.

这篇关于为什么溢出清除p-tag的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！