При значение inline-block, у блоков с меньшим контентом появляются отступы сверху

Question

Изучаю box-sizing, задал всем элементам. Почему когда во 2 блоке контент больше становится (текста например), то у соседних блоков появляется отступ сверху. Как удаляю половину контента, то блоки становятся в ровень. Чисто любопытно ПОЧЕМУ. !!!!ЕСЛИ FLOAT:LEFT задаю то всё как надо в ровень, а вот inline-block делает такое. Отступы обнулены и не добавлены к блокам. Обьясните простым языком

/* &display=swap&subset=cyrillic-ext */

/* ОБНУЛЕНИЕ СТИЛЕЙ */

li {
    list-style: none;
}
a,
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}
img {
    vertical-align: top;
}
html,
body {
    height: 100%;
}
html {
    font-size: 16px; /* по умолчанию */
}
body {
    line-height: 1;
}
.wrapper {
    min-height: 100%;
    overflow: hidden;
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

.block1 {
width: 33%;
background-color: purple;
border: 3px dashed red;
height: 100px;
}
.block2 {
    width: 33%;
background-color: purple;
border: 3px dashed red;
height: 100px;

}
.block3 {
    width: 33%;
    background-color: purple;
    border: 3px dashed red;
    height: 100px;
}
.block {
display: inline-block;}

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lesson 5</title>
    </head>
    <body>
    <div class="wrapper">
        <div class="header">
            <div class=" block block1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis recusandae minus nostrum impedit quidem omnis.</div>
            <div class=" block block2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis cumque repudiandae id ipsam et iure cum atque nostrum culpa totam enim obcaecati porro mollitia aperiam officiis modi ipsa eaque magni, nobis laboriosam rem! Eos, vitae sint? Quod officiis est numquam?</div>
            <div class=" block block3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tenetur omnis illum dicta adipisci repellendus?</div>
        
        </div>
    </div>
        </div>
    </body>
</html>

БЛОГ НА HUSL

При значение inline-block, у блоков с меньшим контентом появляются отступы сверху

Ответы (0 шт):