Как сделать высоту a {} по высоте родителя ul?

Question

[Максим]

Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)
Возможно ли это без js?

Code: https://jsfiddle.net/aemjkhp9/

Answer 1

[Андрей Федоров]

li {
  display: inline-flex;
}
.menu a {
  padding: 0 13px;
}

Comments

[Максим]

Спасибо за решение. Можете объяснить логику inline-flex и 0 в padding?

[Андрей Федоров]

У флекса по умолчанию все внутренние элементы (в данном случае a) растягиваются на всю высоту родителя. У li высота неопределена, точнее на всю выстоту ul, которая у вас задана через line-height.

Можно было бы сделать и так https://jsfiddle.net/sok0nw7m/ (цветом фона выделил размер li. Но тогда пришлось быть придумать как растянуть высоту a до размеров li.

Answer 2

[dicem]