inline-block元素间约4px间隙源于HTML解析器将换行符和空格渲染为文本节点，宽度≈父容器font-size的0.25em；推荐用font-size:0+子元素重设字号或改用display:flex+gap解决。
HTML里多出的“一行间隙”，90%不是CSS没调好，而是源码中换行符和空格被浏览器当成了真实文本节点——尤其在 inline 或 inline-block 元素之间。直接改 margin 或 padding 通常无效，得从解析层下手。
为什么 inline-block 元素间总多出约 4px 间隙
浏览器把 HTML 源码里的换行、缩进、空格统一压缩成一个空格字符，并在行内格式化上下文中渲染出来。这个空格受父容器 font-size 影响：默认 16px 字号下，它大约宽 4px；字号变小，间隙也跟着缩。
- 哪怕你写了
margin: 0、padding: 0，它依然存在 -
display: flex或display: grid容器天然忽略这类空白，所以没这问题 - 动态插入（如 jQuery
.html()）若字符串紧凑无换行，也不会产生该间隙
font-size: 0 是最稳的现场解法
给父容器设 font-size: 0，能直接让那个“空格文本节点”失去渲染依据；再单独给子元素恢复字号，文字就正常显示了。
- 必须同时设置子元素
font-size，否则文字消失 - 注意继承链：如果子元素里还有嵌套文本，需确保它们的字号也被显式指定或重置
- 慎用于含可访问性需求的场景——部分读屏器可能因
font-size: 0跳过内容（实际影响较小，但测试建议覆盖）
line-height 设太小导致最后一行文字被截断怎么修
line-height 不是“两行基线距离”，而是当前行内容盒的高度。设成 line-height: 3px 这类像素值时，若字体实际高度（ascent + descent）超过 3px，文字下半部分就会被裁掉。
- 优先用无单位值，比如
line-height: 1.6，它随字体大小自适应 - 不要只靠
line-height控制段落间距；margin-bottom才是段落之间的逻辑间隔 - 最后一行被截？不是加空
，而是检查是否误将line-height用在了容器上，或父级设置了过小的height/max-height
想彻底绕开空格问题，什么时候该换布局模型
如果你反复遇到这类间隙，说明当前用 inline-block 或手写多行标签的模式已成维护负担。现代项目里，flex 和 grid 不仅语义清晰，还天然规避源码空白干扰。
-
display: flex配合gap可精确控制元素间距，且不依赖字体设置 -
display: grid更适合二维排列，比如按钮组+输入框这种混合结构 - 老项目升级时，注意 IE11 对
gap支持有限（需 fallback 到margin）
真正难处理的不是间隙本身，而是它常和 vertical-align、line-height、字体度量耦合在一起——改一处，三处动。动手前先用开发者工具确认：那个“间隙”到底是文本节点、还是 margin、还是 line-height 撑出来的，比盲目试 CSS 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
