行内盒子（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虽然会渲染出来，但不会把上下行推开，导致视觉溢出。span{padding:20px;/* 左右有效，上下会“穿透”行高 */background:red;}width/height直接失效
想让行内元素有固定尺寸？必须改成display: inline-block或block。a{width:100px;}/* 无效 */a{display:inline-block;width:100px;}/* 有效 */行内盒子的“基线对齐”陷阱
默认vertical-align: baseline，不同字号的行内元素底部会对齐字母基线，导致盒子看起来“悬空”。<spanstyle="font-size:40px;">大</span><spanstyle="font-size:12px;">小</span>解决：
vertical-align: middle或top/bottom。空白字符折叠
行内盒子之间的换行、空格会被浏览器折叠成一个空格，导致布局出现“幽灵间隙”。<span>A</span><span>B</span>/* AB 之间会有一个约 4px 的空格 */解决：父元素设
font-size: 0或标签连写<span>A</span><span>B</span>。无法作为包含块（containing block）
行内盒子不能作为绝对定位（position: absolute）的参照物，只有块级盒子或inline-block可以。span{position:relative;}/* 可以设 relative */span div{position:absolute;}/* 但内部 absolute 会跳出到最近的块级祖先 */行内盒子的“匿名盒子”分身
如果块级元素里直接放文本，浏览器会生成匿名行内盒子包裹文字，它同样遵循行内盒子规则，只是没标签名。
快速自查清单
- 是否要给行内元素设宽高？→ 改
display: inline-block - 垂直 padding/margin 是否生效？→ 记住只影响左右
- 行内元素之间是否有莫名间隙？→ 检查换行/空格
- 基线对齐是否导致视觉错位？→ 调
vertical-align - 是否用行内盒子做定位容器？→ 换成块级或 inline-block
把这张表贴在显示器边框，写布局时瞄一眼，99% 的行内盒子坑都能避开。
