Логика размещения дочерних блоков в HTML/CSS

Question

Изучаю свойства display: block, display: inline и display: inline-block.

Когда верстаю элементы без дочерних элементов, то всё понятно, но сейчас возникла странность.

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

.column {
  display: inline-block;
}

.div1 {
  background: cyan;
}

.div2 {
  background: brown;
}

<div class="column">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>
<div class="column">
  <div class="div1">div1</div>
</div>
<div class="column">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
</div>

Answer 1

Значение по умолчанию для свойства vertical-align равняется "baseline", когда Вы превращаете блочный элемент в inline-block то оно начинает к нему применяться.

Разницу я проиллюстрировал ниже:

Живой пример:

* {
  box-sizing: border-box;
}

.example {
  display: inline-block;
  vertical-align: top;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}

.column {
  display: inline-block;
  vertical-align: baseline;
}

.example.one .column {
  vertical-align: baseline; // значение по умолчанию
}

.example.two .column {
  vertical-align: middle;
}

.example.three .column {
  vertical-align: top;
}

.div1 {
  background-color: orange;
}

.div2 {
  background-color: cyan;
}

<div class="example one">
  <p>baseline<p>
  <small>значение по умолчанию</small>
  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>
</div>

<div class="example two">
  <p>middle<p>
  <small>&nbsp;</small>
  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>
</div>

<div class="example three">
  <p>top<p>
  <small>&nbsp;</small>
  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
  </div>

  <div class="column">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
  </div>
</div>

БЛОГ НА HUSL

Логика размещения дочерних блоков в HTML/CSS

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