Странный верхний край в других ячейках, когда тег IMG находится первым в ячейке таблицы CSS

Question

Я несколько раз замечал эту ошибку при программировании и удивлялся, есть ли у кого-нибудь обходной путь.Когда я создаю таблицу CSS с использованием свойства display: table, если одна из моих ячеек содержит IMG в качестве первого элемента, текст в соседней ячейке начинается ниже высоты этого изображения.Если я поместил какой-либо текст перед тегом изображения, то текст в следующей ячейке будет отображаться нормально.

Я также заметил, что если свойство отображения IMG является блоком, то текст в следующей ячейке начинается нижеизображение, но если IMG установлен для отображения: inline, то текст по соседству выравнивает его базовую линию с базовой линией изображения.

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

Answer 1

Когда я создаю таблицу CSS с использованием свойства display: table

У вас возникла эта проблема, поскольку по умолчанию vertical-align составляет baseline для div s (чтоЯ предполагаю, что вы используете).

Чтобы исправить это, просто укажите vertical-align: top для того, что имеет display: table-cell.