Проблема заключается в том что, не понятно как работает свойство vertical-align.
Тут пример:
div
{
display:inline-block;
border:1px solid red;
padding:5px;
}
div.main
{
padding:10px;
}
.first
{
width:100px;
height:100px;
}
.second
{
width:100px;
height:100px;
}
.third
{
width:110px;
height:50px;
}
.four
{
width:110px;
height:50px;
}
<div class="main">
Hello world!
<div class="first">Hello world 1! Hello world 1! Hello world 1!</div>
<div class="second">Hello world 2!</div>
<div class="third">Hello world 3!</div>
<div class="four"></div>
</div>
Как можно увидеть блоки идут в ряд как и требуется от display:inline-block;
Но нужно же как-то задать выравнивание этих блоков: выровнять по верху, по низу, по середине. И тут нам должно помочь свойство vertical-align, т.к свойство display:inline-block;
дает нам природу inline объектов. Но не тут то и было проблема заключается в том что если блок и является inline-block то если внутри будет какой-то текст то выравнивание будет равняться по этому тексту, а не по блоку.
Объясните мне как работает vertical-align при inline-block.
Как игнорировать содержимое (текст) внутри inline-block элемента?