内联元素加border导致行高溢出，根本原因是border撑高行框而line-height未同步调整，且vertical-align默认baseline引发基线浮动；应显式设vertical-align: middle或text-bottom，或改用inline-block配合vertical-align精确控制。
border撑高行框却没对齐基线
行内元素（如span、a）加border后，上下边框会直接“顶进”行框（line box）内部，但line-height没变，导致整行高度被意外拉高；而vertical-align默认是baseline，border改变了元素自身的基线位置，使它在行中“吊”起来或下沉，相邻行的文字就可能被覆盖或错位。
常见错误现象：span加了border: 1px solid，上一行末尾文字被截掉一半，或下一行开头被压住；开发者工具里能看到border区域确实存在，但视觉上像“叠”在文字上。
- 不要只调
line-height去“补救”——它会无差别拉高整行所有内联内容，破坏多行排版节奏 - 必须显式设置
vertical-align，推荐vertical-align: middle或vertical-align: text-bottom - 若用
vertical-align: -2px微调，需结合当前font-size实测，不同字号偏移值不同
padding-top/bottom不撑开空间，只在行框内绘制
padding-top和padding-bottom对行内元素确实解析并生效，但不会参与行高计算，也不会推开上下行——它们只是“画在行框内部”，一旦父容器line-height偏小，这部分padding就会被裁剪，甚至和邻近行的文字重叠。
验证方式：给span加background-color和padding: 6px 0，会发现背景色只出现在文字周围，上下并无实际占位，更不会把下一行往下推。
- 左右
padding通常可见，但上下方向必须配合display: inline-block才真正可控 -
line-height作用对象是整行，不是单个span；想局部留空，优先用padding而非调line-height - 慎用
vertical-align: bottom——它对齐的是行盒底部，不是文本底边，反而容易加剧覆盖
display: inline-block才是可靠解法
把span改成display: inline-block后，它既保留在当前行内流中（不换行），又获得完整盒模型：border、padding、width、height全部按预期撑开空间，且不再干扰邻近内联元素的行高计算。
但别以为改完就万事大吉：inline-block仍受vertical-align影响，默认baseline会导致底部空白；HTML源码里的换行符还会产生约4px间隙。
- 务必显式声明
vertical-align: middle或vertical-align: top - 父容器需处理间隙：可设
font-size: 0，再在子元素里重置font-size - 若子元素用
em单位（如padding: 0.5em），font-size: 0会使其失效，此时改用rem或像素值更稳妥
box-sizing: border-box要同步启用
加border和padding后，若还出现换行或溢出，大概率是box-sizing仍是默认的content-box：此时width: 100%只管内容区，border和padding额外加在外面，总宽超限就换行。
全局修复只需两行CSS，但必须写全：
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
漏掉*::before或*::after，伪元素仍按content-box计算，某些UI库的图标或装饰就可能错位。
- 表单控件（
input、textarea）常被UA样式设为content-box，需单独覆盖 -
box-sizing不影响margin，它始终在盒子外部，无需额外调整 - 用了
border-box还换行？检查min-width、长单词断行、或浮动元素未清除等连锁问题
真正容易被忽略的，不是border或padding本身，而是它们在行内流中触发的**行框重算**和**基线漂移**——这两个机制不显式干预，光靠调数值永远修不干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
