display: inline-block才管用：它使块级元素水平排列，同时保留宽高、内外边距等块级特性；而inline虽可水平排列但不支持尺寸控制。
块级元素默认不水平排列，display 改成什么才管用？
块级元素（如 <div>、<p>）默认独占一行，想让它们并排，不能只靠 display: block——它就是导致换行的元凶。真正起效的是把显示模式改成 inline 或 inline-block：
-
display: inline：元素变内联，可水平排列，但无法设置宽高、上下 margin 和 padding 不生效 -
display: inline-block：保留块级元素的盒模型控制能力（宽高、内外边距全可用），同时支持水平排列——日常最常用的选择 - 别用
display: flex来“解决这个问题”——那是另一套布局逻辑，不是对块级元素做“水平排列”的直接修正
为什么 inline-block 会有看不见的间隙？
多个 inline-block 元素写在 HTML 里换行或有空格时，浏览器会把它们当作文本节点间的空白符，渲染成约 4px 宽的间隙。这不是 bug，是规范行为。
- 快速验证：给父容器加
font-size: 0，子元素再单独设font-size，间隙消失 - 更稳妥的做法：HTML 中让子元素标签紧挨着写，比如
<div></div><div></div>而不是换行 - 避免用
margin-left: -4px硬调——不同字体、字号下间隙宽度可能变化
IE8 及以下不支持 inline-block 怎么办？
老 IE 对 inline-block 支持不完整：只有原生内联元素（如 <span>）设了才生效，块级元素设了没反应。
- 兼容写法：先声明
display: inline-block，再加一句*display: inline; *zoom: 1;（IE7- 针对性 hack） -
*zoom: 1触发 hasLayout，让 IE6/7 把inline元素当成可尺寸化容器 - 现代项目基本不用考虑——但若维护遗留系统，这个组合仍需记住
用 float 替代 inline-block 行不行？
可以，但代价明显：浮动元素会脱离文档流，导致父容器高度塌陷，必须额外清理（clear 或 BFC 触发）。
- 如果只是简单两三个按钮并排，
inline-block更轻量、无副作用 - 如果需要文字环绕、复杂对齐或响应式断行，
float已被flex和grid取代，不建议新写法中使用 - 注意：
float的“清除浮动”逻辑容易漏掉，尤其动态插入内容后，塌陷问题会突然复现
实际排版中，inline-block 是平衡兼容性、可控性和简洁性的关键支点；但它的间隙问题和 IE8 的限制，恰恰是最容易在上线前被忽略的两个细节。
