神秘的间隙从何而来

电商商品列表页是不是常常遇到这种坑？三个卡片明明宽度各33%，加起来刚好100%，却总有一个被挤到下一行！ 这就是inline-block元素的”神秘间隙”在搞鬼——实则是HTML代码里的换行和空格被浏览器当成了空白字符。

这个间隙宽度和字体大小直接相关：font-size:16px时约8px，12px时约6px。把字体大小设为0，这个间隙就会神奇消失！这就是我们今天要学的核心技巧～

font-size:0的逆袭

原理：让空白字符”断电隐身”

内联元素间隙的本质是HTML空白字符（换行/空格）被浏览器解析成了文本节点。给父容器设置font-size:0，就像给这些空白字符”断电”，让它们尺寸归零隐形。但要记得给子元素单独设置字体大小，不然文字也会消失哦！

.container { font-size: 0; } /* 父容器清零 */
.item { font-size: 16px; display: inline-block; } /* 子元素恢复文字 */

三步搞定完美布局

1. 父容器”清零”

.nav-container {
  font-size: 0; /* 核心：消除空白字符宽度 */
  letter-spacing: 0; /* 可选：增强兼容性 */
}

2. 子元素”复活”文字

.nav-item {
  display: inline-block;
  font-size: 14px; /* 必须重置，否则文字消失 */
  padding: 0 15px;
  vertical-align: top; /* 避免垂直错位 */
}

实战案例：从bug到无缝布局

以导航菜单为例，看看改造前后的对比效果：

问题代码

<nav class="nav-container">
  <a class="nav-item">首页</a>
  <a class="nav-item">产品</a>
  <a class="nav-item">关于我们</a>
</nav>

未处理时，链接间会有8px左右间隙，导致导航项换行。

修复方案

只需两步：

1. 给.nav-container加font-size:0
2. 给.nav-item加font-size:14px和vertical-align:top

修复后所有导航项完美排列，无间隙且对齐工整！这个技巧同样适用于图片墙、商品卡片等场景，比float布局简单10倍～

避坑指南（必看！）

子元素必须重置font-size ⚠️

这是最容易踩的坑！父容器设了font-size:0后，子元素必定要单独设置font-size，否则文字会消失。

浏览器兼容代码

针对Safari和IE的”小脾气”，提议这样写：

.parent {
  font-size: 0;
  letter-spacing: -1em; /* 兼容Safari */
}
.parent > * {
  font-size: 16px;
  letter-spacing: normal; /* 恢复正常间距 */
}

现代方案对比

flex布局 vs font-size:0

flex布局用display:flex一行代码就能消除间隙，适合新项目。但老项目兼容性要求高时，font-size:0仍是救命稻草！

老司机的3个锦囊

1. 封装工具类

.clear-ib { font-size: 0; letter-spacing: -3px; }
.clear-ib > * { font-size: 14px; letter-spacing: normal; }

2. 调试小技巧
   Chrome按Ctrl+Shift+C，直接hover元素就能看到间隙尺寸，定位问题超方便！
3. 布局口诀
   简单排列用inline-block+font-size:0，复杂布局直接上flex，别再用float折腾自己啦～

收藏这篇，下次遇到间隙bug直接翻出来抄作业！