Почему мои встроенные блоки не выравниваются, когда только один из них имеет текст?

Живая страница здесь.

Учитывая эту HTML-страницу:

section[role=main] {
  margin: 1em;
  width: 95%;
  border: 1px solid #999;
}

section[role=main] article {
  width: 40%;
  height: 180px;
  margin: 1em;
  display: inline-block;
  border: 1px solid black;
}

<section role="main">
  <article>Java</article>
  <article></article>
</section>

<section role="main">
  <article>Java</article>
  <article>JavaScript</article>
</section>

Ответ 1

Это является следствием "базового" вертикального выравнивания в CSS. Из спецификация CSS 2.1, раздел 10.8 Расчет высоты линии: свойства "высота строки" и "вертикальное выравнивание"

базовой

Совместите базовую линию с базой исходного поля. Если поле не имеет базовой линии, выровняйте край нижнего края с исходной базой. (мой акцент)

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

Когда в встроенном блоке нет текста, он не имеет базовой линии, поэтому применяется второе (полужирное) предложение.

В JSFiddle здесь: http://jsfiddle.net/WjCb9/1/ Я удалил из вашего примера созданный margin:1em (по крайней мере, для меня) вводящий в заблуждение иллюзию, и добавил текст baseline, чтобы показать, где находится базовая строка окна. Базовая линия находится в нижней части слова "базовая линия", поэтому вы можете видеть, что пустой встроенный блок имеет край нижнего края, выровненный с исходной базой, как это требуется в правиле CSS выше.

Ответ 2

Добавление:

vertical-align: bottom;

К вашему второму правилу следует заставить его работать. По-видимому, встроенные блоки без текста визуализируются как встроенные изображения или что-то еще, а выравнивание по вертикали этих элементов неверно, поэтому принудительное выравнивание по ним устраняет проблему.

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

Ответ 3

Добавьте выравнивание по вертикали к статье:

section[role=main] article { 
  ...
  vertical-align: middle;
}

http://jsbin.com/oqodol/6/edit

Ответ 4

Элементы inline-block позиционируются text-align своего родителя.

Если в блоке нет текста, выровнять нечего.

Вы можете решить эту проблему, используя display: block; и floats, или мое предложение - вставить неразрывное пространство с нулевой шириной с псевдоэлементами:

section[role=main] article:before {
  content: "\2060";
}

Демо