CSS外边距合并问题以及方法

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

示例代码：

<style>div {width: 100px;height: 100px;}.one {background-color: orange;margin-bottom: 10px;}.two {background-color: pink;margin-top: 20px;}</style>
</head><body><div class="one">one</div><div class="two">two</div>
</body>

注意：这里上下块级元素之间的距离是20，而不是 20+10

解决办法

其实这是一个浏览器的Bug，日常工作中我们应该尽量避免。在开发中我们由上到下来进行页面布局，上面的布局如果涉及到外边距的话尽量使用margin-bottom，而下面的布局就不要使用margin-top了，简单来说就是兄弟元素的垂直外边距遵循你设置我就不设置。

举例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>6.4 CSS外边距合并</title></head><style>/*去除默认的值*/* {margin: 0;padding: 0}div {border: 1px solid black;background-color: lightblue;margin: 20px;padding: 20px;text-align: center;}h2 {margin: 30px 0;}p {background: #6ba2cc;margin: 10px;padding: 5px;}</style><body><div><h2>《游子吟》</h2><p>慈母手中线，游子身上衣。</p><p>临行密密缝，意恐迟迟归。</p><p>谁言寸草心，报得三春晖。</p></div></body>
</html>

运行后如图：

分析：以上示例中div有一个外边距20px，内边距20px。如下图展示：

h2上下边距是30px，紧接着h2下面是p标签，注意观察外边距。

p是外边距10px，内边距5px，如下图所示：两个P标签之间的距离实际上只有10px，像这种外边距相同的情况下，外边距就会合并显示10px。

那如果一个外边距是30px，一个外边距是10px呢？刚好就是咱们示例中的h2和p元素。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者，也就是30px。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

说明：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS外边距合并问题以及方法_网页制作_青青个人博客

CSS外边距合并问题以及方法相关推荐

html设置外边距不合并,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了. 我习惯把图中所示的margin边界称为外边距,padding填充部分称之为内边距.设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好办法 ...
css外边距自动代码,CSS外边距合并代码
请看下面的图,就对边距的理解很清晰了. 我习惯把图中所示的margin边界称为外边距,padding填充部分称之为内边距.设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好办法 ...
5、CSS 外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 1.外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中 ...
CSS外边距合并和CSS清除浮动
外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页 ...
html外边距合并,CSS 外边距合并问题
小鸡炖蘑菇炖小鸡你好:外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.外边距合并外边距合并(叠加)是一个相当简单的概念. ...
html css外边距,CSS外边距合并
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 发生外边距塌陷的三种 ...
css 外边距合并问题
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
外边距合并及解决方法
外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素 ...
CSS 外边距重叠及防止方法
外边距重叠及防止方法外边距重叠 1.什么是外边距重叠 2.类型 3.意义 4.特殊情况解决方法外边距重叠 1.什么是外边距重叠两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽 ...

CSS外边距合并问题以及方法

CSS外边距合并问题以及方法相关推荐

最新文章

热门文章