display: inline-block 是更稳妥的选择，它既保持元素在行内流中排列，又允许设置宽高、内外边距和 vertical-align 对齐；而 display: inline 会使块级元素丢失宽高及垂直 margin/padding 控制。
display: inline 能让块级元素变成行内元素，但会丢失宽高控制能力；更常用、更实用的是 display: inline-block —— 它保留宽高设置，又支持同行排列。
为什么不用 display: inline 直接改块元素？
因为 display: inline 会让元素彻底回归行内行为：宽度高度失效、垂直方向的 margin 和 padding 不影响布局、无法对齐基线（除非加 vertical-align）。比如把 <div> 设为 <code>inline 后，width: 200px 和 height: 50px 全部被忽略。
常见错误现象：<p>A</p>
<p>B</p> 加了 display: inline 确实挤到一行了，但两个段落文字紧贴着、上下边距消失、高度塌陷 —— 这不是“可控的同行显示”，只是“被迫压扁”。
display: inline-block 是更稳妥的选择
它既保持元素在行内流中排列，又允许你像块元素一样设置 width、height、padding、margin，还支持 vertical-align 对齐。
- 多个
div设为inline-block后，默认按基线对齐，常出现底部留白 —— 加vertical-align: top或vertical-align: middle可解决 - 元素间有天然空白（来自 HTML 换行符或空格），可用父容器设
font-size: 0+ 子元素重设字体来消除 - IE8+ 完全支持，无需 hack；但 IE7 需要额外触发 hasLayout（如加
zoom: 1）
示例：
.item {
display: inline-block;
width: 120px;
height: 80px;
vertical-align: top;
margin-right: 8px;
}
替代方案：float 和 flex 的适用边界
float: left 曾是主流做法，但它会让元素脱离文档流，必须清除浮动（clear: both 或 BFC 触发），维护成本高，现在仅用于兼容极老项目。
display: flex 更现代，但它是作用于**父容器**的布局方式，不是单个元素的“显示模式转换”。如果你只需要让几个块元素并排，又不想改整体结构，inline-block 仍是轻量、精准的解法。
注意：flex 下子项默认是 flex-item，不再受 display 值影响 —— 即使子元素写了 display: block，也不会恢复块级换行行为。
真正容易被忽略的是：行内块元素间的空白是真实存在的 DOM 文本节点（空格/换行），不是 CSS 渲染 bug。想彻底规避，要么删 HTML 空格，要么用 font-size: 0 抑制，否则光靠 margin 调整很难对齐像素级位置。
