inline-block元素间4px间隙源于HTML解析器将换行符/空格渲染为U+0020文本节点，宽度≈父容器font-size的0.25em；可用font-size:0+子元素重设字号（IE8+兼容）或现代flex+gap方案解决。
inline-block 元素间多出 4px 间隙怎么确认
这不是 CSS 没写对，而是 HTML 解析器把换行符或空格当成了文本节点——哪怕你写了 margin: 0、padding: 0，它照样渲染。打开 DevTools，选中两个相邻的 inline-block 元素，在 Elements 面板里看它们之间是否夹着一个「#text」节点（内容是空格或换行），那就是元凶。
font-size: 0 要怎么用才不翻车
给父容器设 font-size: 0 确实能“吃掉”空白节点，但子元素若没显式重置字号，文字会消失或极小。必须配合子元素单独声明字号：
.parent { font-size: 0; }-
.child { font-size: 16px; display: inline-block; }（不能只靠继承） - 如果子元素含嵌套文本（比如按钮里有图标+文字），需确保所有文本层级都覆盖到，否则部分文字仍不可见
为什么 flex 布局能绕过这个问题
因为 flex 容器完全不依赖 HTML 源码中的空白符来排布子项——display: flex 让子元素脱离常规文本流，换行、空格、注释全被忽略。但要注意：
- 改用
flex后，vertical-align失效，别再指望靠它调垂直对齐 - 若原布局依赖
inline-block的基线对齐行为，换成 flex 后得用align-items重新控制 -
gap属性比手动设margin更干净，且不会触发 margin 折叠
图片下方留白不是空格，是基线对齐惹的祸
inline 元素，会按基线（baseline）对齐所在行的文字，下方自然留出 descender 空间。这不是 HTML 空格导致的，所以 font-size: 0 或删换行都没用。正确解法只有两个：
-
img { vertical-align: top; }（或middle、bottom） -
img { display: block; }（最彻底，但会破坏内联上下文）
容易被忽略的是：如果图片包在 或 里，父元素的 line-height 也会放大这个间隙，此时光调 img 不够，得一并检查父级行高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
