CSS 与布局 / Inline 与 inline-block · 拆解 / inline-block 之间的空白间隙 待审核 5 / 8
gotcha · whitespace

inline-block 之间的空白间隙

把几个 inline-block 分行写在 HTML 里,渲染出来它们之间总有约 4px 的间隙,margin: 0 也消不掉。原因与 01 · 行框与行内框讲的机制同源:它们是行内级内容,而源码里两个标签之间的换行与缩进,在 CSS 的空白处理阶段被折叠成一个空白字符再渲染——就像单词之间的那个空格一样,占掉一个空格的宽度。

图 1 · 分行书写的 inline-block 之间那道空白间隙,可切换字体与字号观察宽度变化。

1 · 缝从哪来:它就是「一个空格」

折叠发生在 CSS 的空白处理阶段(受 white-space 控制),而非 HTML 解析阶段——解析器原样保留文本节点。因为 inline-block 是行内级的,这个空白字符就像句子里的空格一样被真的渲染出来,宽度 ≈ 当前 font-size 下一个空格的宽,约 0.26–0.28em(实测 16px 下 Arial 4.45px、PingFang SC 与 Times New Roman 4.19px,随字体与字号变)。块级元素之间没有这问题,因为块级根本不在一行里排。

2 · 怎么去掉(各有取舍)

图 2-1 · 四种消除间隙的写法及其代价对照。