Why is there a strange padding with "display: inline-block" and "font-size: 0"?

Question

css

Hello. There was a problem. I have a container with the following styles:

ul {
  font-size: 0;
  background: red;
  line-height: 80px;
}

Inside it are several objects with the following styles:

ul > li {
  display: inline-block;
  font-size: 16px;
  background: yellow;
  line-height: inherit;
}

Here is an example on codepen: example .
As you can see, a few pixels of padding appeared at the bottom. Please help me remove this gap.

Answer 1

Don't use line-height to specify the height of the ul.

ul {
  background: red;
  height: 80px;
}
ul > li {
  display: inline-block;
  font-size: 16px;
  background: yellow;
  line-height: 80px;
}

Answer 2

What you want to do can be solved in several ways:
1. Here, for example, using the same Codepen
paddings
2. Another option with setting height = line-height
Codepen
Here, by the way, the height of the list will indeed be 80 pixels.
3. And here is a good article about many ways to center centering-css-complete-guide in Russian
4. You can also read about flexboxes

Answer 3

Add vertical-align: top; and the margin will disappear.

ul > li {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  background: yellow;
}

Answer 4

Everything worked out, this option helped me to look.
I applied it on my website about tattooing.