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

<div style="background-color:red">
  <div style="display:inline-block;background-color:green;height:20px;width:20px;"></div>
</div>
<div style="background-color:yellow">
  <div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div>
</div>

Ответ 1

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

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

решение:

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

Ответ 2

Как разместить пространство нулевой ширины () в "пустом" node?

Ответ 3

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

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

Ответ 4

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

min-height: 1em;

Использование некоторого пространства в некоторых случаях является разной высотой.