在 CSS 布局中，inline-block 元素之间为什么会出现间隙？请列举并说明消除这种间隙的常用方法及其适用场景。
考察说明
考查对 inline-block 布局特性及其间隙成因和解决方案的理解。
回答思路
- 【回答框架 1】间隙产生的原因：HTML 中 inline-block 元素之间的空白字符（如空格、换行）会被当作文本渲染为一个空格宽度，从而在元素间形成间隙。这是 CSS 遵循文本排版规则的自然结果。
- 【回答框架 2】消除间隙的常用方法：1. 将 HTML 中元素之间的空白字符去除或注释掉，使元素紧密排列。2. 将父元素的 font-size 设置为 0，但需要为子元素重新设置 font-size。3. 使用负 margin 调整，如 margin-right: -4px，但依赖具体字体和大小，不够稳定。4. 使用 flexbox 或 grid 布局替代 inline-block，从根本上避免间隙问题。
- 【关键点 1】间隙源于空白字符被渲染为一个空格宽度。
- 【关键点 2】去除空白、父级 font-size:0、负 margin、flex/grid 替代均可解决。
- 【关键点 3】font-size:0 需注意子元素显式设置字号。
- 【易错点 1】负 margin 的像素值依赖字体和字号，易产生兼容性问题。
- 【易错点 2】font-size:0 会影响子元素继承，必须显式重置。