如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素,那么它自身的外边距会发生叠加 三,外边距折叠后的大小 1.两个相同大小的正数:取某个外边距的值。即30px与30px发生折叠,折叠后的值为30px。 2.两个不同大小的正数:取较大的外边距的值。即30px与20px发生折叠,折叠后...
外边距折叠:块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距折叠。 出现外边距折叠的两种情况 1.同级别块级元素之间: 当对于上下垂直的两个块级元素之间未设置浮动( ‘ float ’ 以及 ‘ position:ab...
外边距折叠是指有时候上边距与下边距坍缩成较大的那一个边距的行为。它只会发生在同一BFC的块级元素间,并且永远不会发生在浮动元素或绝对定位元素间。 可能的情况 毗邻的兄弟元素 相邻的兄弟元素垂直边距会发生折叠,但最后一个元素需要清除浮动时例外。 父元素和第一个/最后一个子元素 父元素与第一个子元素的mar...
外边距折叠现象也可以看作是浏览器对渲染性能的一种优化。通过合并相邻的垂直外边距，浏览器可以减少计算和渲染的复杂度，提高页面的加载速度和渲染效率.避免外边距折叠的方法 使用内边距（Padding）：在某些情况下，可以通过在元素之间添加内边距来避免外边距折叠。例如，在一个容器元素中，通过设置内边距，可以使子元...
这就是外边距折叠(Margin Collapsing)现象。 一、外边距折叠原理 外边距折叠的规则相对复杂,但我们可以总结为以下几点: 相邻兄弟元素折叠:两个垂直相邻的兄弟元素,如果它们的上外边距和下外边距相遇,那么它们将折叠成一个外边距,高度等于两者中的较大值。 空元素折叠:如果一个元素没有任何内容(包括文本、图片等)且...
1. 什么是CSS外边距折叠 CSS外边距折叠(Margin Collapsing)是指在垂直方向上,当两个或多个相邻的块级元素的外边距相遇时,它们会合并为一个外边距,而不是简单地相加。这是CSS盒模型的一个特性,用于合并相邻块级元素的外边距,以避免不必要的空间浪费。
产生外边距折叠的情况一般分为以下三种: 1. 块级父元素与其第一个/最后一个子元素 h1 { margin: 0; background: #cff; } #div1{ margin: 40px 0 25px 0; background: #999; } #div2{ margin: 20px 0 10px 0; background: #cff; } 这是一个标题 这是第一个块级盒子 测试的结果是:h1...
看这个例子中的两个p标签,根据样式定义:第一个p的margin-bottom和第二个p的margin-top都是10px,那实际距离应该等于20px才对,但是用浏览器查看一下可以发现,最终的边距是10px。 这个例子就是外边距折叠:块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距。
从下图可以看出,这样是符合前面元素在标准流中,没有设置内边距、边框 案例二: 来尝试给每个div添加一个边框看看 div { border: 5px solid #333; height: 20px; margin: 24px 0; text-align: center; } 效果如下图: 由此可以得出 - 兄弟节点间设置边框、外边距 是不会影响外边距折叠。