details标签本身不引发边距重叠，问题在于summary与后续兄弟元素间的垂直外边距塌陷；可通过padding、BFC或容器隔离来可靠控制间距。
details 标签本身不会引发边距重叠（margin collapse），真正出问题的，是它内部的 summary 和后续兄弟元素之间的垂直外边距合并 —— 尤其当 summary 是块级元素、且后面紧跟着另一个块级元素时。
为什么 summary 后面的元素会“跳上去”？
浏览器把 summary 当作一个普通块级元素（默认 display: list-item，但行为接近 block）。如果你给它设了 margin-bottom: 20px，又给后一个 p 或 div 设了 margin-top: 16px，这两个垂直外边距就会塌陷，最终只保留较大的那个（比如 20px），而不是叠加成 36px。
常见错误现象包括：
- 展开
details后，下面的段落看起来“贴得太近”，间距比预期小 - 用开发者工具检查发现
summary的margin-bottom和下个元素的margin-top在 “Computed” 面板里只显示一个值 - 加了
border或padding后间距突然正常了 —— 这正是塌陷被打破的信号
怎么让 details + summary 的间距可控？
核心思路：打断 summary 和后续元素之间的外边距塌陷。不推荐强行加双倍 margin，而是用更稳定的方式隔离上下文。
立即学习“前端免费学习笔记（深入）”；
- 给
summary加padding-bottom: 20px（而非margin-bottom）—— 内边距不会塌陷，且能撑开空间 - 给
details设置overflow: hidden或display: flow-root，触发 BFC，使内部子元素的 margin 不再和外部元素合并 - 如果后续内容是动态插入的（比如 JS 展开后 append），确保新节点不直接拼在
summary后面，而是包裹进一个div class="details-content"，再统一控制这个容器的margin-top
summary 的 display 值会影响布局吗？
会影响，而且容易被忽略。默认 summary 是 display: list-item，带内置 marker（小三角），但它的盒模型行为不稳定 —— 某些浏览器下它可能不完全响应 margin，或与父 details 产生意外对齐。
实操建议：
- 显式重置为
summary { display: block; }，去掉 marker 干扰（如不需要小箭头，可加list-style: none） - 若需保留小箭头但要精准控制间距，用
summary::marker { margin-inline-end: 8px; }调整图标间距，避免影响整体 margin 计算 - 不要对
summary使用float或position: absolute—— 它会脱离文档流，导致后续内容直接顶上来，且无法触发正常折叠逻辑
移动端点击区域和边距错位怎么防？
summary 是可点击区域，默认最小点击高度受系统限制（iOS Safari 强制 ≥44px）。如果你只靠 padding 撑高，而没设 min-height 或 line-height，在高 DPR 屏幕上可能实际渲染高度不足，导致点击热区偏移、视觉边距也跟着“虚”。
关键点：
- 给
summary加min-height: 44px和display: flex; align-items: center;，保证点击区域可靠 - 避免仅靠
margin控制行距 —— 改用line-height配合padding，更稳定适配不同字体大小 - 测试时真机打开 Chrome DevTools 的 “Toggle device toolbar”，选 iPhone 15 Pro 等型号，观察缩放后
summary下边距是否像素级对齐
细节在于 summary 不是普通标题，它既是交互入口又是布局节点；边距问题从来不是标签本身的 bug，而是你没意识到它正参与外边距塌陷链 —— 打断它，比猜它塌了多少更省事。
