为何display: inline-block元素间会出现未设置的微小空隙？

问题描述 #

我制作了一个简单的区块结构来可视化display: inline-block属性的作用，却发现区块之间出现了未设置的、类似边框的微小空隙。想请教该空隙为何会出现？我曾在Discord社区询问，但未得到正确解释。

代码示例 #

CSS代码

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    margin-top: 0;
    font-weight: 100;
}

.container {
    background-color: rgba(12, 14, 24, 0.82);
}

.yellow {
    background-color: rgba(255, 251, 2, 0.82);
    height: 300px;
    width: 10%;
    display: inline-block;
    box-sizing: border-box;
}

.pink {
    background-color: rgba(236, 2, 157, 0.68);
    height: 300px;
    width: 10%;
    display: inline-block;
    box-sizing: border-box;
}

.cyan {
    background-color: cyan;
    height: 300px;
    width: 10%;
    display: inline-block;
    box-sizing: border-box;
}

HTML代码

<div class="container">
    <div class="yellow">
        <h1>1</h1>
    </div>
    <div class="pink">
        <h1>2</h1>
    </div>
    <div class="cyan">
        <h1>3</h1>
    </div>
</div>

原因分析 #

这个空隙的本质是**HTML中的空白字符（空格、换行符等）**导致的。当元素设置为display: inline-block时，浏览器会将其视为行内元素处理，而行内元素之间的空白字符会被渲染成一个空格，这就是你看到的微小空隙。

解决办法 #

这里提供几种常用的解决方案：

• 移除HTML中的空白字符：将相邻的<div>标签紧密拼接，消除它们之间的换行和空格，示例：

<div class="yellow"><h1>1</h1></div><div class="pink"><h1>2</h1></div><div class="cyan"><h1>3</h1></div>

• 给父容器设置font-size: 0：给.container添加font-size: 0样式，让空白字符的渲染尺寸变为0，同时记得给子元素（如h1）重新设置合适的字体大小，避免文字被隐藏。
• 使用负margin抵消空隙：给每个inline-block元素设置负的margin-right（比如margin-right: -4px），但该方法的数值需要根据字体大小调整，兼容性和灵活性较差。
• 改用Flexbox布局：直接将父容器的display设置为flex，既不会产生空白空隙，还能更便捷地控制元素排列，这是目前更推荐的现代布局方案。

内容的提问来源于stack exchange，提问作者Artur Kasparov