Почему появляется странный отступ при «display: inline-block» и «font-size: 0»?
Не используйте line-height для указания высоты ul.ul {
  background: red;
  height: 80px;
}
ul > li {
  display: inline-block;
  font-size: 16px;
  background: yellow;
  line-height: 80px;
}
То, что вы хотите сделать, можно решить несколькими способами:
1. Вот, например вариант с использованием одинаковых паддингов Codepen
2. Ещё вариант c установкой height = line-heightCodepen
Тут, кстати, высота списка действительно будет 80 пикселей.
3. И вот неплохая статья по поводу многих способов центрирования centering-css-complete-guide по-русски
4. А ещё можно про flexbox`ы почитать