外边距（margin）本身透明不渲染，但会推挤相邻元素；垂直方向块级元素上下margin相遇时发生合并，取较大值而非相加，导致看似“消失”的margin实际影响布局。
为什么 margin 看不见却占空间？
因为外边距（margin）本身是透明的，不渲染颜色或边框，但它会真实推挤相邻元素。常见现象是：两个 div 之间没写任何间距，却自动隔开一段距离——大概率是垂直方向上的 margin 合并（margin collapse）在作祟。
典型触发场景：display: block 元素的上下 margin 相邻时（比如连续的 p 或 div），浏览器会取两者中较大的那个值，而不是相加。这会让调试者误以为“样式没生效”或“被覆盖了”。
- 用浏览器开发者工具选中元素，看
Computed面板里的margin-top/margin-bottom值是否和Styles面板写的不一致 - 临时给父容器加
border: 1px solid transparent或padding: 0.1px，可阻止子元素的 margin 合并 - 避免依赖“空
div+margin”来分隔内容，改用gap（Flex/Grid）或padding
如何确认 box-sizing 正在悄悄改变尺寸？
box-sizing: border-box 是现代布局的默认推荐，但老项目或重置样式里可能混用 content-box。问题在于：当你设了 width: 200px; padding: 20px; border: 2px solid，最终元素宽度在 content-box 下是 244px，而 border-box 下才是 200px——这种差异会导致布局错位，且不容易一眼看出。
尤其在响应式断点下，一个未统一 box-sizing 的组件可能突然换行或溢出。
- 全局检查是否漏写了
* { box-sizing: border-box; }（注意：伪元素也要显式设置） - 在
Computed面板里直接查box-sizing值，别只信Styles面板里的继承箭头 - 第三方 UI 库（如 Bootstrap）通常自带重置，但自定义组件若单独引入，可能脱离该上下文
浮动元素导致的“隐形高度塌陷”怎么揪出来？
当父容器内全是 float: left 的子元素，父容器高度会变成 0——它没崩，只是“看不见地塌了”。这时你看到的下方元素上移、背景色消失、边框不包裹内容，都是塌陷的表象，而非 CSS 写错了。
现代方案优先用 display: flex 或 display: grid 替代浮动布局；但如果必须兼容旧代码，清除浮动仍是刚需。
- 不要只靠
clear: both加在下一个兄弟元素上——这治标不治本，父容器依然无高 - 推荐给父容器加
overflow: hidden（或auto），简单有效，但要注意可能影响position: absolute子元素的裁剪 - 更稳妥的是用伪元素清除：
&::after { content: ""; display: table; clear: both; }
为什么 line-height 会让文字“悬浮”在块中间？
line-height 控制的是行盒（line box）的高度，不是文字本身的高度。当 line-height > font-size，多余空间会均分到文字上下，造成“文字看起来垂直居中”，但其实它是被撑开的行盒托着的。一旦父容器 height 固定或有 overflow: hidden，就容易截断或错位。
这种“隐形间距”在按钮、导航项、卡片标题里特别隐蔽——你调了 padding，却发现上下留白始终多出几像素。
- 用开发者工具的
Layout面板打开“Show layer borders”，能看到行盒实际范围 - 对单行文本，可用
height+display: flex+align-items: center替代纯line-height居中 -
line-height: 1.5是无单位数值，相对于当前font-size计算；而line-height: 24px是绝对值，慎用于响应式字体
调试这类问题的关键，是别只盯着“写了什么”，而要观察“渲染出来的是什么”——浏览器 DevTools 的 Computed 和 Layout 面板比源码更诚实。真正难的不是发现 margin 或 line-height，而是意识到它们正在以非直观的方式参与布局计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
