inline-block元素间空白源于html换行/空格被解析为u+0020字符，宽度≈父容器font-size的0.25em；推荐父容器设font-size:0并重置子元素字号，或改用flex+gap。
inline-block 元素间为什么总有看不见的空白？
这是最常被卡住的问题：明明写了 display: inline-block，元素却在视觉上被“撑开”了一段缝隙，不是 margin 也不是 padding，查不到来源。
根本原因是 HTML 源码里的换行符和空格会被浏览器解析为一个空白字符（U+0020），而该字符在字体大小不为 0 时会占据物理宽度。只要两个 inline-block 元素之间有换行或空格，就会出现这个间隙。
- 解决办法不是删掉所有换行——那会让 HTML 难读；更实用的是在父容器上设
font-size: 0，子元素再单独恢复字号 - 或者用注释把换行“吃掉”：
<div></div> <!-- --><div></div> - Flexbox 或 Grid 是现代替代方案，但若必须用
inline-block，就别指望靠margin-left: -4px这类魔法值一劳永逸——不同字体、字号下间隙宽度会变
vertical-align 默认值导致元素底部不对齐
inline-block 元素默认 vertical-align: baseline，而 baseline 对齐的是文本基线，不是盒子底边。所以图片和文字混排时，图片下方常留出一段空白，看起来像“悬空”。
- 直接设
vertical-align: top/middle/bottom可快速对齐，top最常用 - 注意：这个属性只对
inline和inline-block生效，block元素设了也无效 - 如果父容器有行高（
line-height），它会影响 baseline 的位置，进一步加剧错位——此时优先调vertical-align，而不是动line-height
IE8 及更老版本里 inline-block 不生效
IE8 支持 display: inline-block，但仅限于原生 inline 元素（如 span、a）；对 div 这类默认 block 的元素，直接写 display: inline-block 会被忽略。
- 兼容写法必须叠加触发 hasLayout：
display: inline-block; *display: inline; *zoom: 1; -
*display和*zoom是 IE6–7 的 hack，IE8+ 已不需，但项目若仍需支持 IE8，就得保留 - Firefox 早期版本（display: -moz-inline-stack，现在基本可忽略，除非维护超老系统
width/height 设置生效，但盒模型行为容易误判
inline-block 确实允许设置 width 和 height，但它仍属于行内上下文，所以某些盒模型表现和 block 不同。
-
margin四边都生效，但margin-top/margin-bottom不会撑开父容器高度（除非父容器是inline上下文） -
padding四边都有效，但垂直方向的padding会撑开元素自身，不影响同行其他元素的基线位置 - 它不能像
block那样通过margin: auto实现水平居中；想居中得靠父容器text-align: center
真正麻烦的不是语法错误，而是你改了 display 却没同步调整对齐、间隙、居中这些配套逻辑——它们不报错，但布局就是歪的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
