CSS- 外边距重叠问题

文章目录

外边距折叠问题
- 兄弟元素之间
- 父子元素之间

外边距折叠问题

外边距的重叠指的是相邻的两个或多个外边距会在垂直方向上发生合并，合并为一个外边距。
注意：

margin 折叠只发生在块级元素上；
浮动元素的外边距不会与任何外边距发生折叠；
设置了 overflow 属性且值不为 visible 的块级元素，将不会与它的子元素发生外边距折叠；
绝对定位元素的外边距不与任何外边距发生折叠；
根元素（例如）的外边距不与其它任何外边距发生折叠。

兄弟元素之间

在相邻的两个兄弟元素之间：

如果相邻两个元素外边距的值都为正数，那么两个元素的实际间距为两个外边距中较大的那个；
如果相邻两个元素外边距的值都为负数，那么两个元素的实际间距为两个外边距中较小的那个；（绝对值较大的那个）
如果相邻两个元素外边距的值一个为正数、一个为负数，那么两个元素之间的实际间距为两个外边距相加的和。

父子元素之间

在父元素与其子元素之间：（注意：父元素不能定义边框和内边距，且父元素与子元素之间不能有其它元素）

如果父元素与子元素外边距的值都为正数，那么折叠后的外边距为两个外边距中较大的那个；
如果父元素与子元素外边距的值都为负数，那么折叠后的外边距为两个外边距中较小的那个；
如果父元素与子元素外边距的值一个为正数、一个负数，那么折叠后的外边距为两个外边距相加的和。

CSS- 外边距重叠问题相关推荐

[css] 外边距重叠是什么？重叠的结果是什么？怎么防止外边距重叠？
[css] 外边距重叠是什么?重叠的结果是什么?怎么防止外边距重叠? 外边距重叠是什么?外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 重叠后的外边距的高度等于两个发生重叠的外边距的 ...
CSS 外边距重叠及防止方法
外边距重叠及防止方法外边距重叠 1.什么是外边距重叠 2.类型 3.意义 4.特殊情况解决方法外边距重叠 1.什么是外边距重叠两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽 ...
CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠外边距重叠是指两个或多个盒子(可能相邻也可 ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
CSS解决高度塌缩问题和外边距重叠问题
高度塌陷的问题在浮动布局中,父元素默认是被子元素撑开的当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失父元素高度丢失后,其下的元素会自动上移, ...
CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
如何解决外边距重叠问题
CSS 外边距(margin)重叠及防止方法边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻 ...
css怎样清除外边距,CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值 ...
CSS外边距折叠引发的问题
CSS外边距折叠第一种:两个块级元素的上下边距折叠第二种:父元素和子元素(或者最后一个元素)的外边距第三种:空的块级元素的上下外边距折叠的根本原因: margin之间直接接触,没有阻隔折叠后 ...
HTML-完美解决父子元素的外边距重叠和高度塌陷问题
HTML-完美解决父子元素的外边距重叠和高度塌陷问题参考文章: (1)HTML-完美解决父子元素的外边距重叠和高度塌陷问题 (2)https://www.cnblogs.com/hack-ing/p ...

CSS- 外边距重叠问题

文章目录

外边距折叠问题

兄弟元素之间

父子元素之间

CSS- 外边距重叠问题相关推荐

最新文章

热门文章