inline-block布局可使元素同行排列且保留块级特性，但html换行或空格会引发约4px间隙。解决方法包括：父元素font-size设为0、HTML注释消除空白、负margin调整、元素写在同一行。现代布局推荐使用flexbox或css Grid以避免此类问题，但在简单场景中inline-block仍具实用价值。
在CSS中使用inline-block布局可以实现元素在同一行内排列，同时保留块级元素的特性，比如设置宽高。但一个常见问题是：当多个inline-block元素并排时，HTML中的换行或空格会被浏览器渲染成空白间距，导致意料之外的间隙。
inline-block 布局的基本用法
display: inline-block; 让元素像内联元素一样排列，又能设置宽度、高度、内外边距等块级属性。
常用于实现水平导航栏、图片文字对齐、多列等分布局等场景。
示例：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
1
2
3
为什么会出现间隙？
因为inline-block元素之间的换行符或空格被当作文本处理，就像单词之间的空格一样，浏览器会渲染出约4px左右的空白。
立即学习“前端免费学习笔记（深入）”；
即使你把HTML写成一行，比如：
<div>1</div><div>2</div><div>3</div>
就不会出现间隙。但这样牺牲了代码可读性。
常见的去除间隙方法
以下是几种实用且兼容性较好的解决方案：
- 将父元素 font-size 设为 0：
空格的宽度受字体大小影响，设为0即可消除间隙，子元素再重新设置 font-size。
.container { font-size: 0; } .item { font-size: 16px; }
- HTML 注释消除空白：
在元素之间插入 HTML 注释，把换行和空格“包裹”掉。
<div class="item">1</div><!-- --><div class="item">2</div><!-- --><div class="item">3</div>
- 使用负 margin：
给 inline-block 元素添加margin-right: -4px;来抵消空隙。
.item { display: inline-block; margin-right: -4px; }
注意最后一个元素可能需要重置 margin。
- 让所有元素写在一行 HTML 中：
直接避免换行和空格存在。
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
虽然有效，但不利于维护。
现代替代方案建议
虽然inline-block兼容性好，但在复杂布局中推荐使用更现代的方法：
- Flexbox：使用
display: flex;可完美控制子元素排列，无间隙问题。 - CSS Grid：适合二维布局，控制更精细。
如果项目支持现代浏览器，优先考虑 Flex 或 Grid，避免陷入inline-block的细节陷阱。
基本上就这些。inline-block 仍有其价值，特别是在简单布局或需要基线对齐的场景，只要掌握间隙处理技巧即可灵活使用。