后端同学问了一个问题：“为什么背景色没有充满？”
F12，inspect，哎嗨，p 标签存在默认边距
源码如下：
点击查看代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>折叠面板示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
.collapse {
width: 98%;
margin: 5px auto;
}
.collapse-item {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
}
.collapse-header {
display: flex;
align-items: center;
background-color: #f7f7f7;
padding-left: 8px;
height: 50px;
cursor: pointer;
}
.collapse-content {
background-color: #000000;
color: #FFFFFF;
border-top: 1px solid #ddd;
}
.arrow {
margin-right: 5px;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
margin: 24px;
}
</style>
</head>
<body>
<div class="collapse">
<div class="collapse-item">
<div class="collapse-content">
<p>这是面板 1 的内容。</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
问题来了：为什么上边距填充了背景色，下边距没有呢？
引入今天主题：** 边距合并 **
根据 GPT 给出的边距合并规则：
在 CSS 中，边距合并（margin collapsing）是一种现象，当两个块级元素的上下边距相邻时，它们的外边距合并为一个边距，而不是简单相加。这种合并规则通常在以下情况下发生：
边距合并的规则：
相邻块级元素的上下边距：
如果一个块级元素的下边距与下一个块级元素的上边距相邻，它们会合并成一个边距。合并后的边距效应表现为它们中较大的边距值。
<div class="box1"></div>
<div class="box2"></div>
.box1 {
margin-bottom: 20px; /* 下边距 */
}
.box2 {
margin-top: 30px; /* 上边距 */
}
上面例子中，合并后的边距为 30px，而不是 20px + 30px = 50px。
父元素与子元素的边距：
当子元素垂直居于父元素内时，如果子元素的上边距和父元素的上边距相接，则父元素的边距会跟子元素的边距合并，表现为子元素的边距。
<div class="parent">
<div class="child"></div>
</div>
.parent {
margin-top: 20px; /* 父元素上边距 */
}
.child {
margin-top: 30px; /* 子元素上边距 */
}
在这种情况下，父元素的上边距可能会被合并为 30px。
空的块级元素：
如果一个块级元素没有内容（即是空的），并且设置了边距，那么这些边距也可能会发生合并。
<div class="empty"></div>
.empty {
margin-top: 20px; /* 空元素的上边距 */
}
如果这是在一个父元素中，可能会导致父元素的边距合并。
合并边距的例外情况：
有边框或内边距的元素： 如果上或下边距元素有边框（border）或内边距（padding），那么边距就不会合并。
浮动元素： 如果元素是浮动的话，它的边距也不会合并。
完全包含： 在
overflow: hidden;, overflow: scroll;等情况下，合并也会被阻止。
在这个例子中，父子元素边距合并规则又区分为上边距合并、下边距合并。一般没有设置 parent 元素高度，边距合并会影响 parent 的高度计算
- 上边距合并（Margin Collapse）
定义：当一个子元素的上边距（margin-top）与其父元素的上边距重叠时，会发生边距合并。
情况：
子元素的上边距与父元素的上边距合并：如果子元素的 margin-top 值大于父元素的 margin-top 值，则合并后的上边距为两者中的较大者。
不涉及边框和内边距：这个合并只在子元素的上边距与父元素的上边距之间发生，没有涉及到父元素的边框（border）和内边距（padding）。
示例：
<div class="parent">
<div class="child"></div>
</div>
.parent {
margin-top: 20px; /* 父元素的上边距 */
}
.child {
margin-top: 30px; /* 子元素的上边距 */
}
在这个例子中，父元素的上边距是20px，子元素的上边距是30px。当父元素和子元素共用一个上下文（没有边框和内边距的情况下），合并结果为30px。
- 下边距合并（Margin Collapse）
定义：同样地，当子元素的下边距（margin-bottom）与父元素的下边距重叠时，也会发生边距合并。
情况：
子元素的下边距与父元素的下边距合并：如果子元素的 margin-bottom 值更大，则合并后的下边距同样是两者中的较大者。
同样不涉及边框和内边距：下边距的合并也不考虑父元素的边框和内边距。
示例：
<div class="parent">
<div class="child"></div>
</div>
.parent {
margin-bottom: 15px; /* 父元素的下边距 */
}
.child {
margin-bottom: 25px; /* 子元素的下边距 */
}
在这个例子中，父元素的下边距为15px，子元素的下边距为25px。由于合并规则，最终的合并结果为25px。
讲了那么多，为什么上边距合并填充了颜色，下边距却没有颜色？为什么 parent 高度比 p 标签高度小？
在 CSS 中，父元素的高度计算规则主要由以下几个方面构成：
- 内容高度
父元素的高度通常基于其子元素的高度。如果父元素没有设定明确的高度（通过 height 属性），那么它的高度会根据其中可见内容的实际高度进行自动调整。这意味着，父元素的高度是通过累积的子元素的内容高度和内边距、边框等来计算的。
- 合并下边距
下边距合并（margin collapsing）是指当两个块级元素的下边距相接触时，会合并成一个下边距，而不简单地相加。合并下边距的行为在以下情况中发生：
当两个垂直方向的块级元素相邻时，它们的下边距可以合并。
父元素的下边距与它最后一个子元素的下边距可以发生合并。
- 合并影响父元素高度
由于合并下边距的机制，父元素的高度不包括合并后的下边距。例如，假设一个父元素中的最后一个子元素有一个下边距，且这个下边距与父元素的下边距相接触，父元素的高度在计算时不会包括这个下边距。因此，父元素的实际可见尺寸往往会小于子元素的内容总高度。
- 特殊情况
在某些情况下，比如当子元素设置为浮动（float）或定位（position: absolute）时，父元素的高度可能不会被这些子元素计算在内。这是因为浮动元素从文档流中“脱离”了。
- 避免下边距合并
可以通过以下方式来避免下边距合并以确保父元素的高度包含所有下边距：
在父元素中添加内边距（padding）。
在父元素中添加边框（border）。
使用 overflow 属性，例如设置为 hidden 或 auto。
示例
<div class="parent">
<div class="child">Hello</div>
<div class="child">World</div>
</div>
.parent {
background: lightblue;
}
.child {
margin-bottom: 20px; /*这20px下边距在合并时可能不会计算在父元素高度中*/
}
在这个例子中，虽然子元素有下边距，但如果父元素没有额外的 padding 或 border，其高度可能不会包含这20px的下边距。
以上。
PS：感谢 GPT，这个破边距差点没把我 CPU 干烧了
PPS：博客园啊，好古早了，好久没登录，没想到密码还能记得，看以前的留言，有种园子长草，很荒芜的感觉