элемент inline-block без текстового отображения по-разному

hi

При визуализации в FF или Chrome высота красного div равна 26px, тогда как высота желтого div равна 20px. Как я могу сделать красный div рендерингом так же, как желтый div, но без него, содержащего какой-либо текст?

Solutions Collecting From Web of "элемент inline-block без текстового отображения по-разному"

просто мысль:

до тех пор, пока в div нет текста, он обрабатывается как встроенное изображение (или что-то еще), и поэтому вертикальное выравнивание устанавливается на «базовый уровень» (или текст-дно или что-то еще) вместо «снизу».

решение:

чтобы исправить это, установите vertical-align: bottom; на ваших внутренних div. нет необходимости вставлять в него пространство или невидимый элемент, как упоминалось в других (но это тоже было бы (уродливое) решение)

Как насчет размещения пространства нулевой ширины ( ) в «пустом» узле?

Это хромой, но вы можете добавить   на пустой div.

inline-block – забавный тип отображения и без содержимого, потому что другие свойства, такие как font-size и line-height могут фактически увеличивать элемент выше 20 пикселей.

Если вы хотите иметь определенную высоту, используйте

 min-height: 1em; 

В некоторых случаях использование какого-то пространства имеет разную высоту.