CSS margin合并

外边距合并

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距

发生外边距合并的三种基本情况

1. 相邻的兄弟姐妹元素

<div id="margin_parent">
<div><b>父margin-top: 80px，子margin-top: 50px，则最后margin-top为80px</b></div>
</div>

CSS

#margin_parent{width: 200px;height: 200px;background-color: green;margin-top:80px;
}
#margin_parent div{width: 200px;height: 200px;background-color: yellow;margin-top:50px;opacity: 0.5;
}

2. 块级父元素与其第一个/最后一个子元素

margin-top：块级父元素和其第一个子元素会发生上外边距合并

margin-bottom：块级父元素与它的最后一个子元素会发生下边距合并，要求：父元素没有border、padding、inline content、height、min-height、max-height等

<div id="margin_parent">
<div><b>父margin-top: 80px，子margin-top: 50px，则最后margin-top为80px</b></div>
</div>

CSS

#margin_parent{width: 200px;height: 200px;background-color: green;margin-top:80px;
}
#margin_parent div{width: 200px;height: 200px;background-color: yellow;margin-top:50px;opacity: 0.5;
}

3. 空块元素

如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并

<p style="margin-bottom: 0px;background-color:green;">这个段落的和下面段落的距离将为50px</p>
<div style="margin-top: 50px; margin-bottom: 50px;"></div>
<p style="margin-top: 0px;background-color:green;">中间div的设置margin-top: 50px; margin-bottom: 50px;<br/>两个会折叠成一个50px</p>

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

转载于:https://www.cnblogs.com/coolqiyu/p/7255999.html

CSS margin合并相关推荐

css【详解】—— margin属性（含margin合并，margin：auto，margin失效）
目录 margin合并的场景 1. 相邻兄弟元素margin合并 2. 父级和第一个/最后一个子元素阻止margin-top合并的方法阻止margin-bottom合并的方法 3. 空块级元素的m ...
解决margin塌陷的问题_解决margin塌陷与margin合并（margin）清除浮动问题
**1.margin塌陷** 问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生 ...
须知的css——margin不重叠的情形
margin重叠摘自css2.1规范中文版 CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin.Margin按这种方式结合叫重叠(collapse) ,产生 ...
CSS margin属性详解
CSS margin属性详解我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...
垂直margin合并问题
垂直margin合并问题前提: 同属于一个BFC的两个相邻的盒子的margin会发生重叠描述: 外边距合并指的是,当两个垂直外边距相遇时(水平外边距相遇的时候不会有这种问题),它们将形成一个外边距 ...
margin塌陷与margin合并、浮动流
一.margin 塌陷父子嵌套元素,垂直方向的margin,父子会粘合在一起,取最大的值.子级不能根据父级定位,好像父级没有棚. 解决方案,触发bfc(block format context),使 ...
[css] margin和padding使用的场景有哪些？
[css] margin和padding使用的场景有哪些? 实现自适应的等比例矩形效果: div { padding: 50%; } div { padding: 25% 50%; } //宽高比为 ...
CSS margin 属性简介
CSS margin 属性设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做 ...
CSS Margin(外边距)
CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...
性能优化--JS、CSS压缩合并
在前台性能优化过程中,减少HTTP请求数量,就可以减少与服务器交互次数,从而很好的提高系统性能,此次通过实践,网络查阅资料,发现两种压缩合并js和css的方式:combres和BundleConfig ...