死亡是一座永恒的灯塔

0%

什么是外边距重叠?重叠的结果是什么?

外边距重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。

外边距重叠的结果

结果的边界宽度是相邻边界宽度中最大的值。

如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。

如果没有正边界,则从零中减去绝对值最大的负边界。

外边距重叠的意义

外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。

防止外边距重叠解决方案

虽然外边距的重叠有其一定的意义,但有时候我们在设计上却不想让元素之间产生重叠,那么可以有如下几个建议可供参考:

  • 外层元素padding代替
  • 内层元素透明边框 border:1px solid transparent;
  • 内层元素绝对定位 postion:absolute:
  • 外层元素 overflow:hidden;
  • 内层元素 加float:left;或display:inline-block;
  • 内层元素padding:1px;

版权声明:本文为CSDN博主「jnshu_it」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jnshu_it/article/details/85370693

坚持技术分享,您的支持将鼓励我继续创作!