CSS行内盒子：30字掌握核心特性

行内盒子（inline box）是 CSS 视觉格式化中最小的布局单位，指的是浏览器把行内元素 （如 span、a、strong 等）在渲染时生成的不可见矩形框 。它不像块级盒子那样独占一行，而是在行内框模型（inline formatting context）里像文字一样并排流动。

核心特性（一图胜千言）

维度	行为	是否生效	示例
width / height	直接忽略	❌ 无效	`span { width: 100px; }` → 无效果
padding 水平	占据空间，推动左右兄弟	✅ 有效	`padding-left: 20px` 会把右边文字挤开
padding 垂直	背景可见，但不推动上下行	⚠️ 半有效	上下背景色会溢出，但行高不变
margin 水平	占据空间，推动左右兄弟	✅ 有效	`margin-right: 10px` 有效
margin 垂直	完全不生效	❌ 无效	`margin-top: 20px` 被忽略
border 水平	占据空间	✅ 有效	左右边框会撑开布局
border 垂直	背景可见，但不推动上下行	⚠️ 半有效	上下边框会画出来，但行高不变
line-height	决定行内盒子自身高度	✅ 有效	`span { line-height: 30px; }` 会改变行盒高度

注意事项（面试坑点）

垂直方向"幽灵空白"

行内盒子的 padding-top / padding-bottom、border-top / border-bottom 虽然会渲染出来，但不会把上下行推开，导致视觉溢出。
css 复制代码
```
span {
  padding: 20px;      /* 左右有效，上下会"穿透"行高 */
  background: red;
}
```
width/height 直接失效

想让行内元素有固定尺寸？必须改成 display: inline-block 或 block。
css 复制代码
```
a { width: 100px; }           /* 无效 */
a { display: inline-block; width: 100px; } /* 有效 */
```
行内盒子的"基线对齐"陷阱

默认 vertical-align: baseline，不同字号的行内元素底部会对齐字母基线，导致盒子看起来"悬空"。
html 复制代码
```
大
小
```
解决：vertical-align: middle 或 top / bottom。
空白字符折叠

行内盒子之间的换行、空格会被浏览器折叠成一个空格，导致布局出现"幽灵间隙"。
html 复制代码
```
A
B /* AB 之间会有一个约 4px 的空格 */
```
解决：父元素设 font-size: 0 或标签连写 AB。
无法作为包含块（containing block）

行内盒子不能作为绝对定位（position: absolute）的参照物，只有块级盒子或 inline-block 可以。
css 复制代码
```
span { position: relative; }        /* 可以设 relative */
span div { position: absolute; }    /* 但内部 absolute 会跳出到最近的块级祖先 */
```
行内盒子的"匿名盒子"分身

如果块级元素里直接放文本，浏览器会生成匿名行内盒子包裹文字，它同样遵循行内盒子规则，只是没标签名。

快速自查清单

是否要给行内元素设宽高？→ 改 display: inline-block
垂直 padding/margin 是否生效？→ 记住只影响左右
行内元素之间是否有莫名间隙？→ 检查换行/空格
基线对齐是否导致视觉错位？→ 调 vertical-align
是否用行内盒子做定位容器？→ 换成块级或 inline-block

把这张表贴在显示器边框，写布局时瞄一眼，99% 的行内盒子坑都能避开。