什么是外边距折叠？什么情况下出现？怎么解决？

2023-04-18 15:10:27 80

这里可以补充一个概念 -- 内部和外部显示类型。

如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。该盒子的所有直接子元素都会成为 flex 元素，会根据弹性盒子（Flexbox ）规则进行布局。

还有一个特殊的值 -- display: inline-block，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不发生换行，但可以设定宽度和高度，也就是说实现了块级的部分效果：

HTML4 中，元素被分成两大类: inline (内联元素) 与 block (块级元素)。

一个行内元素只占据它对应标签的边框所包含的空间。

常见的行内元素有 a、 b、 span、 img、 strong、 sub sup、 button、 input、 label、 select、 textarea

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

常见的块级元素有 div、ul 、ol、 li、 dl、 dt、 dd、 h1、 h2、 h3、h4 、 h5、h6 、p

格式上（默认情况），行内元素不会换行，而块级元素都会换行。
内容上（默认情况），行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
在属性上：
- 行内元素
  - width 和 height 设置无效（可以设置 line-height)，
  - 内边距（padding）、外边距（margin）和边框（border）在 上下方向 不会对其他元素产生影响。
- 块级元素
  - width 和 height 属性可以发挥作用，
  - 内边距（padding）、外边距（margin）和边框（border）会将其他元素从当前元素周围“推开”

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为 边距折叠。

2 个或多个毗邻的的普通流中的块元素垂直方向上的 margin 会折叠

以上就是什么是外边距折叠？什么情况下出现？怎么解决？的详细内容，更多请关注毛票票其它相关文章！