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

我有一个简单的divs列表，除了一个div是

内联块

<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;
}

---

我还是不明白为什么它的行高和字体大小都是20px？有什么建议吗？

因为内联的必须放在容器的行高内

---

如果您将容器的

行高设置为
10px
（示例中的
主体
），它将正常工作。
，因为内联的必须位于容器的行高内

如果您将容器的
行高设置为
10px
（示例中的
主体
），它将正常工作。
@JeanlucaScaljeri更重要的是，需要考虑两个行高，一个是容器，另一个是元素。一些有用的链接可以帮助您理解事情是如何工作的：/@gabriele:为了精确定义，应该将内联元素放置在由线条高度定义的线条框内（而不是线条高度内）@Temaniaff如果您是正确的。这是一个门外汉的解释：）@JeanlucaScaljeri更重要的是，需要考虑两个线的高度，一个是容器的高度，另一个是元素的高度。一些有用的链接可以帮助您理解事情是如何工作的：/@gabriele:为了精确定义，应该将内联元素放置在由线条高度定义的线条框内（而不是线条高度内）@Temaniaff如果您是正确的。这是外行的解释：）
body { font-size: 0 }