display: inline-block能让容器宽度自适应，因其兼具内联元素的同行特性和块级元素的盒模型控制能力，宽度由内容撑开且可设padding/margin/border，是轻量兼容的“内容包裹”方案。
为什么 display: inline-block 能让容器宽度自适应
因为 inline-block 元素既保留块级元素的盒模型（可设 padding/margin/border），又像行内元素一样「不独占一行、宽度由内容决定」。它不会像 display: block 那样默认撑满父容器，也不会像 display: inline 那样无法设置宽高——这是最轻量、兼容性最好的“内容撑开”方案之一。
display: inline-block 容易踩的三个空格坑
HTML 中换行和空格会被浏览器解析为一个空白符，导致两个 inline-block 元素之间出现约 4px 的缝隙：
- 子元素是
span或div，且 HTML 源码里写了换行或缩进 → 缝隙必现 - 父容器没设
font-size: 0，子元素又没重置font-size→ 缝隙更明显 - 用
letter-spacing: -0.31em或注释节点消除空格，但容易在不同字号下失效
推荐解法：.parent { font-size: 0; } .parent > * { font-size: 14px; }，简单稳定。
和 inline-flex 比，inline-block 有什么实际差异
两者都能让容器宽度收缩包裹内容，但行为逻辑不同：
-
inline-block是单层布局，子元素仍按普通文档流排列，vertical-align控制对齐（默认 baseline） -
inline-flex启动弹性上下文，子元素自动变成 flex item，justify-content/align-items才管用，vertical-align失效 - IE10+ 支持
inline-block；inline-flex在 IE10/11 中需加-ms-前缀，且部分属性（如gap）不支持 - 若子元素含浮动或绝对定位，
inline-block父容器仍能感知其尺寸（只要没触发 BFC 边界），而flex容器会忽略脱离流的元素高度
什么时候不该用 inline-block
它不是万能解药，以下场景建议绕开：
- 需要子元素等高、垂直居中、响应式换行时 ——
inline-flex或grid更可控 - 父容器本身是
table-cell或absolute/fixed定位，且需精确控制基线对齐时，inline-block的vertical-align行为容易混乱 - 内容动态变化频繁（如文字长度实时更新），且要求宽度无抖动 ——
inline-block触发重排成本略高，width: fit-content+display: block更稳定
真正难处理的，从来不是怎么写那一行 display: inline-block，而是它悄悄把空格、基线、继承字体大小这些隐性规则全带进来了——改之前先看一眼开发者工具里 computed 的 line-height 和 font-size。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
