Почему появляется странный отступ при «display: inline-block» и «font-size: 0»?

Question

[Дмитрий Петров]

Привет. Возникла проблема. Есть контейнер со следующими стилями:

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

Внутри него находится несколько объектов с такими стилями:

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

Вот пример на codepen: пример.

Как вы видите, снизу появился отступ в несколько пикселей. Помогите пожалуйста убрать этот отступ.

Answer 1

[Elwen]

Не используйте line-height для указания высоты ul.

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

Comments

[Дмитрий Петров]

Спасибо. А можете рассказать, откуда все-таки берётся этот отступ?

[Elwen]

Дмитрий Петров: Дело в том, что когда вы сделали li инлайновыми (строчными) элементами, то они выровнялись по базовой линии текста (vertical-align: baseline). А базовая линия проходит под буквами без учета их хвостиков (то есть для текста "Арфа" базовая линия будет под буквами "а", хвостики от "р" и "ф" игнорируются). Но место под эти самые хвостики все же резервируется. Так и получается, что отступ под li - это зарезервированное место под хвостики букв, которые могут быть в одной строке с инлайновыми li.
С этим же явлением можно столкнуться, если заключить img (это инлайновый элемент) в div. Под картинкой будет зазор опять же из-за baseline . https://jsfiddle.net/7amy5nxt/

Выйти из положения в обоих случаях можно несколькими путями:
- задать родительскому элементу фиксированную высоту;
- задать инлайновым элементам vertical-align: middle;
- сделать инлайновые элементы блочными display: block (для отображения в строку добавить еще float:left).
В вашем случае также можно заменить line-height на padding, как предлагает quramolt

Answer 2

[quramolt]

То, что вы хотите сделать, можно решить несколькими способами:

1. Вот, например вариант с использованием одинаковых паддингов
Codepen

2. Ещё вариант c установкой height = line-height
Codepen
Тут, кстати, высота списка действительно будет 80 пикселей.

3. И вот неплохая статья по поводу многих способов центрирования centering-css-complete-guide по-русски

4. А ещё можно про flexbox`ы почитать

Answer 3

[Vmenvmass]

Все получилось, помог вот этот вариант посмотреть
Применил его на своём сайте о татуаже