Откуда появляется горизонтальный отступ у инлайн-блоков?

Question

[Посторонним В.]

Есть элемент div, в нем ссылка, в которой находится span с названием. Элементу задано отображение inline-block. Когда я задаю ссылке внутри него display: table-cell, у div появляется нижний отступ. Хотя у него нет ни внешних, ни внутренних отступов.

<div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div><div class="item"><a><span>Some title</span></a></div>

.item {
  width: 280px;
  background: #2569c7;
  display: inline-block;
  font-size: 18px;
  padding: .5em;
}

a {
    display: table-cell;
    height: 80px;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

span {
  color: white;
}

https://jsfiddle.net/wqc6v49n/7/

Откуда эти отступы? Как их убрать?

Comments

[boga-net]

Подключите reset.css или normalize.css
Уберите отступы у всех элементов
* {
margin: 0;
padding: 0;
}

[Посторонним В.]

boga-net, подключен normalize. Никаких вертикальных отступов нет ни у одного из элементов (смотрю инспектором Хрома)

[Антон Спирин]

Посторонним В., подобная задача легко решается с помощью flex

[Посторонним В.]

Антон Спирин, только на нем бы и верстал, если бы не требовалась обратная совместимость (чуть реже, чем всегда).

Answer 1

[tyzberd]

Как пофиксить вы поняли.
А появляются эти отступы потому, что с доктайпом в строгом режиме (html5 доктайп тоже) браузер все равно резервирует место для символов таких как g, j или q, даже для картинок https://jsfiddle.net/erjwux0o/ и тут уже появляется междустрочный интервал.
https://www.quirksmode.org/css/quirksmode.html
https://en.wikipedia.org/wiki/Quirks_mode
и если ваш код добавить в html без доктайпа, отступа не будет

Comments

[Посторонним В.]

Точно, доктайп влияет. Спасибо!

Answer 2

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

Вы меняете способ отображения блочного элемента на строчный (inline). В этом случае элемент ведет себя как символ. Так же как буква или цифра или спец.символ в тексте. А особенностью символов является межсимвольный и междустрочный интервалы. На скриншоте вы как раз и видите междустрочный интервал между inline-блоками.

Comments

[Посторонним В.]

Я не inline задал, а inline-block.
И установка line-height в 100% не помогает.

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

Посторонним В., с точки зрения междустрочных и межсимвольных интервалов inline или inline-block - не имеет значения. line-height нужно задавать не 100%, а 0, чтобы не было междустрочного интервала.

[Посторонним В.]

Андрей Федоров, да, сработало. Спасибо.

Answer 3

[Посторонним В.]

Помогло vertical-align:

.item {
// ...
vertical-align: middle 
}

По умолчанию было baseline (браузер ставил), из-за этого были отступы. Хотя я не понимаю, по какой логике.