赞助商

html – 为什么溢出清晰的p-tag边距

发布时间:2019-07-11 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – 为什么溢出清晰的p-tag边距脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚从老师那里学到了一个新的“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>

上面的内容被删除了.希望很清楚.

总结

以上是脚本之家为你收集整理的html – 为什么溢出清晰的p-tag边距全部内容,希望文章能够帮你解决html – 为什么溢出清晰的p-tag边距所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: