内联元素加border后文字被截断或错位，根本原因是border撑高行框而line-height未同步调整，导致行盒布局失衡；vertical-align默认baseline引发基线浮动，需显式设为middle或text-bottom，或改用inline-block配合vertical-align精确控制。
内联元素加border后文字被截断或错位
内联元素（如span、a）默认不占据整行，其高度由line-height和字体实际尺寸决定，而不是由height控制。一旦加了border，尤其是上下边框，就会直接“撑高”行框（line box），但父容器的line-height没变，导致文字被border顶出可视区域，或与相邻行重叠——这不是“内容溢出”，而是行盒布局失衡。
为什么vertical-align是关键参数
内联元素在行内对齐方式默认是baseline，而border会改变元素的基线位置，进而影响整行的行高计算。不显式设置vertical-align，浏览器按默认规则对齐，容易让带border的span“吊”在行中间甚至下沉，造成视觉上文字被切掉一半。
- 推荐统一设为
vertical-align: middle或vertical-align: text-bottom，避免基线浮动 - 若需精确控制，用
vertical-align: -2px这类像素偏移微调（需结合font-size测试） - 慎用
vertical-align: bottom：它对齐的是行盒底部，不是文本底边，反而易加剧截断
display: inline-block比纯inline更可控
单纯给span加border却不改显示模式，等于在脆弱的行内流里硬塞块级结构。改成display: inline-block后，元素获得独立的盒模型，padding、border、height都能按预期生效，且不会干扰邻近内联元素的行高。
- 必须配合
vertical-align使用，否则仍可能因默认基线引发错位 - 若父容器
line-height远大于子元素font-size，inline-block元素会悬浮在行中，此时设vertical-align: bottom或text-bottom更稳妥 - 注意：
inline-block会保留HTML换行符产生的空格，必要时用注释或font-size: 0临时清空
避免用line-height硬调来“补救”
有人发现加border后文字被切，就去调大父元素的line-height，这看似有效，实则埋坑：它会无差别拉高整行所有内联内容，破坏排版节奏，尤其在多行文本或混合图标+文字场景下极易失控。
立即学习“前端免费学习笔记（深入）”；
- 真正该调的是子元素自身的盒尺寸：用
padding替代line-height预留空间 - 例如：
span { border: 1px solid #333; padding: 2px 4px; }，比line-height: 1.8更精准、更局部 - 若必须控制垂直居中，优先用
padding-top/padding-bottom配vertical-align: middle，而非全局line-height
最易被忽略的点：内联元素的溢出问题从来不是“内容太多装不下”，而是“行盒被border意外撑开又没对齐”。解决路径永远是先锁定vertical-align，再决定是否升级为inline-block，最后用padding精细调节——别碰line-height，除非你真想动整行。
