Почему мои блоки inline-block не выровнены, когда только один из них имеет текст? [Дубликат]
На этот вопрос уже есть ответ здесь:
Почему этот элемент inline-block перемещается вниз? 8 ответовЖивая страницаВот.
Учитывая эту страницу 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>
Я ожидаю, что обе мои статьи будут выровнены, но, как видно на скриншоте ниже, только когда обе мои статьи имеют текст,<article>
элементы выровнены по центру:
Есть идеи, что вызывает такое поведение и как его можно исправить?