CSS margin 重叠(margin collapse)

`margin 重叠(margin collapse)`

首先有两个地方是我自己以前也没有注意的

非替换元素的内联元素(<span>, <code>等), 设置上下 margin 没有用. 但是设置左右 margin 是有效果的. 而替换元素(<img> 等), 设置上下左右四个 margin 都有效果
其次就是只有上下 margin 会发生重叠(这个说法不严谨, 后面会解释).

进入正题, 上下 margin 重叠时, 谁的值(绝对值)更大最终的 margin 大小就是谁的值. 如果上下 margin 大小相同也是这样.

`margin 重叠的三种情况`

`相邻的兄弟节点`

<div class="box"><div style="margin-bottom: 1rem;">123</div><div style="margin-top: 2rem;">abc</div>
</div>

.box {border: 1px solid;
}

最终合并的 margin 大小为 2rem

如果想阻止这种情况 margin 合并很简单, 就是破坏相邻这个条件, 因为两个都是块元素, 给他们中间增加 <br/> 换行就可以啦

CSS margin 重叠(margin collapse)相关推荐

CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠外边距重叠是指两个或多个盒子(可能相邻也可 ...
[css] position跟margin collapse这些特性相互叠加后会怎么样？
[css] position跟margin collapse这些特性相互叠加后会怎么样? 怎样防止外边距重叠?底部元素脱离文档流(float: left/right || position: abso ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
margin重叠问题
margin重叠 CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin.Margin按这种方式结合叫重叠(collapse) ,产生的结合的margin叫做重叠 ...
margin重叠及防止方法
注:本文转载自(http://www.hujuntao.com/web/css/css-margin-overlap.html) 前段时间辞职了,然后一直处于求职的状态,面试的第一家公司是一家初创公司 ...
图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
CSS 外补白(Margin) 内补白(Padding) 边框属性定位（positioning）属性布局(layout)属性
CSS 布局(Layout) Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 display CSS1/CSS2 ...
4、CSS 外边距margin
围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CS ...

CSS margin 重叠(margin collapse)

`margin 重叠(margin collapse)`

`margin 重叠的三种情况`

`相邻的兄弟节点`

CSS margin 重叠(margin collapse)相关推荐

最新文章

热门文章