css table-cell, содержимое имеет ненужное верхнее поле

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

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

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

Может ли кто-нибудь посмотреть и сообщить мне, что мне не хватает.


html css css-tables
person Ashwin    schedule 12.07.2012    source источник

Ответы (2)


arrow_upward
40
arrow_downward

добавить vertical-align:top; в #wrapper > div

См. демонстрацию: http://jsbin.com/avozik/14/edit.

person Ahsan Khurshid    schedule 12.07.2012
comment
Для всех, кто интересуется информацией о вертикальном выравнивании, это хорошее объяснение. - person brains911; 12.07.2012

arrow_upward
3
arrow_downward

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

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

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

person lulalala    schedule 13.02.2017
comment
Как ни странно, ваша скрипка не такая, как я думал, она будет отображаться, похоже, что логотип Google вертикально выровнен по верху, но я не вижу вертикального выравнивания нигде в коде, я что-то упустил? - person brandito; 11.04.2018
comment
Было бы разумнее, если бы я просто заменил изображение очень большим однострочным текстом. Вы увидите две ячейки, выровненные по базовой линии jsfiddle.net/46tyc48y/5. - person lulalala; 11.04.2018