inline-block元素间空隙因换行和空格被解析为文本节点所致，浏览器将其渲染为约4-8px空白；解决方法包括父容器设font-size:0后子元素重置字体、html注释连接元素、使用float或推荐的flex布局，其中font-size:0兼容性好，新项目建议用flex避免问题。
在使用CSS盒模型布局时，当多个 inline-block 元素并排排列，比如水平导航菜单或图片列表，常会发现元素之间出现多余的空白间隙。这并非代码写错，而是HTML中换行和空格被浏览器解析为文本节点导致的。
为什么inline-block会产生空隙？
浏览器会把 inline-block 元素之间的换行符、回车或空格当作一个“空白字符”处理，就像单词之间的空格一样，因此会在元素之间渲染出约4-8px的空隙。
例如：
<div class="container"> <span class="item">1</span> <span class="item">2</span> <span class="item">3</span> </div>
即使设置了 display: inline-block，这三个 span 之间也会出现空隙。
立即学习“前端免费学习笔记（深入）”；
解决方法：使用 font-size: 0
最常用且兼容性好的方式是在父容器上设置 font-size: 0，然后在子元素上重新设置需要的字体大小。
示例代码：
.container {
font-size: 0; /* 消除空白间隙 */
}
<p>.item {
display: inline-block;
width: 100px;
height: 50px;
font-size: 16px; /<em> 重置字体大小 </em>/
background: #007acc;
}这样既能消除空隙，又能保证内容正常显示。
其他解决方案（可选）
- HTML注释消除空格：将元素紧密排列，用HTML注释连接
<span class="item">1</span><!-- --><span class="item">2</span><!-- --><span class="item">3</span>
基本上就这些。对于老项目保持 inline-block 布局时，font-size: 0 是最简单有效的去空隙方式。新项目建议优先考虑 Flex 布局，从根本上避免问题。
