0

I have a simple list of divs, with the exception that one div is an 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

all looks just fine (font-size :20px). However, when I change the font-size to 10px things are getting weird

enter image description here

DEMO

Although I can fix it by adding 

body { font-size: 0 }

DEMO

I still don't understand why it did work with a line-height and font-size of 20px ? Any suggestions ?

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333

1 Answers1

2

Because the inline one has to be positioned inside the line height of its container.

If you set the container's line-height to 10px (the body in your examples) it will work fine.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 2
    @JeanlucaScaljeri more presicely there is two line height that need to be considered, the one of the container and the one of the element. Some useful links to understand how things works : https://stackoverflow.com/questions/52282391/understanding-css2-1-specification-regarding-height-on-inline-level-boxes / https://stackoverflow.com/questions/52280267/why-is-there-space-between-line-boxes-not-due-to-half-leading – Temani Afif Nov 13 '18 at 13:22
  • 2
    @gabriele : for precise definition, an inline element should be placed inside the line box defined by the line height (not inside the line height) – Temani Afif Nov 13 '18 at 13:28
  • @TemaniAfif yes your are right. It was a laymans explanation :) – Gabriele Petrioli Nov 13 '18 at 13:39