块列表和内联块显示不正确的垂直间距答案

【问题标题】：List of blocks and inline-blocks show incorrect vertical spacings块列表和内联块显示不正确的垂直间距
【发布时间】：2018-11-13 21:16:03
【问题描述】：

我有一个简单的 div 列表，除了一个 div 是 inline-block

<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
...

div {
    background-color: #000;
    color: #fff;
    line-height: 20px;
    font-size: 20px; 
}

div:nth-child(5) {
    display: inline-block;
    color: #bada55;
}

DEMO

一切看起来都很好（字体大小：20px）。但是，当我将字体大小更改为 10px 时，事情变得很奇怪

DEMO

虽然我可以通过添加来修复它

body { font-size: 0 }

DEMO

我仍然不明白为什么它确实适用于 line-height 和 font-size 20px ？有什么建议吗？

【问题讨论】：

标签： html css

【解决方案1】：

因为内联必须位于其容器的行高内。

如果您将容器的 line-height 设置为 10px（在您的示例中为 body），它将正常工作。

【讨论】：

@JeanlucaScaljeri 更准确地说，需要考虑两个行高，一个是容器的行高，一个是元素的行高。一些有用的链接来了解事情是如何运作的：stackoverflow.com/questions/52282391/… / stackoverflow.com/questions/52280267/…
@gabriele : 为了精确定义，内联元素应放置在由行高定义的行框内（而不是行高内）
@TemaniAfif 是的，你是对的。这是一个外行的解释:)