Css table-cell, содержимое имеет ненужный верхний край

Я использую размещение табличных ячеек блоков div в моем коде. В моем коде есть проблема.

Предварительный просмотр того, как выглядит мой html здесь

Когда у меня есть какой-либо контент (текст или изображение) в моей первой панели, то div .inner второй и третьей панели имеют верхнее поле в 10-15 пикселей. Почему это?

Может ли кто-нибудь взглянуть и сообщить мне, чего я не вижу.

Ответы

Ответ 2

У меня есть аналогичный случай, и vertical-align:top; решает проблему. Однако я хочу уточнить причину этого:

https://jsfiddle.net/46tyc48y/1/

Поскольку ячейки таблицы используют vertical-align:baseline; по умолчанию, текст правой ячейки выравнивается по базовой линии (внизу) изображения, создавая интервал phantom сверху. Поэтому мы должны явно установить vertical-align, чтобы обойти это поведение.