Список блоков и inline-блоков показывают неправильные вертикальные интервалы

Question

У меня есть простой список div s, за исключением того, что один 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

все выглядит просто отлично (размер шрифта: 20 пикселей).Однако, когда я изменяю размер шрифта на 10 пикселей, все становится странным

DEMO

ХотяЯ могу это исправить, добавив

body { font-size: 0 }

DEMO

Я до сих пор не понимаю, почему он работал с высотой строки и размером шрифта 20 пикселей?Есть предложения?

Answer 1

Поскольку встроенный объект должен располагаться внутри высоты строки его контейнера.

Если вы установите line-height контейнера на 10px ( body в ваших примерах ), он будет работать нормально.