5个设为20%的inline-block元素为何其中一个换行？

你遇到的问题是inline-block元素之间的空白字符导致的。HTML中元素之间的换行、空格会被渲染成空白，这些空白会占据额外宽度，5个20%的元素加上空白的总宽度就超过了100%，所以最后一个SQL面板被挤到下一行。

下面是几种解决方法：

方法1：消除HTML中的空白字符 #

把.panel元素的标签连在一起，或者用注释消除它们之间的换行/空格：

<div class="panels">
    <div class="panel">
        <img src="imgs/html.png" alt="HTML Logo">
        <h4>HTML</h4>
    </div><div class="panel">
        <img src="imgs/css.png" alt="CSS Logo">
        <h4>CSS</h4>
    </div><div class="panel">
        <img src="imgs/javascript.png" alt="JavaScript Logo">
        <h4>JavaScript</h4>
    </div><div class="panel">
        <img src="imgs/php.png" alt="PHP Logo">
        <h4>PHP</h4>
    </div><div class="panel">
        <img src="imgs/sql.png" alt="SQL Logo">
        <h4>SQL</h4>
    </div>
</div>

方法2：通过CSS消除空白宽度 #

给父容器.panels设置font-size: 0，因为空白字符的大小由父元素字体决定，设为0就能消除空白；之后再给.panel恢复字体大小：

.panels{
    width: 100%;
    text-align: center;
    font-size: 0; /* 消除inline-block间的空白 */
}

.panels .panel{
    width: 20%;
    display: inline-block;
    font-size: 16px; /* 恢复子元素字体大小，按需调整 */
}

方法3：使用Flexbox布局（推荐） #

Flexbox是现代布局方案，能彻底避免inline-block的空白问题，还能更灵活地控制元素排列：

.panels{
    width: 100%;
    display: flex; /* 启用flex布局 */
    justify-content: center; /* 水平居中元素 */
    /* 如果需要元素之间有间距，添加下面一行 */
    /* gap: 10px; */
}

.panels .panel{
    width: 20%;
    /* 无需再设置display: inline-block */
}

至于你用19%宽度能显示的原因：5个19%元素总宽度是95%，加上空白的宽度刚好不超过100%，但空白的存在会让元素对齐效果差，间距不一致。

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