Логика размещения дочерних блоков в HTML/CSS
1,00
р.
Изучаю свойства display: block, display: inline и display: inline-block.
Когда верстаю элементы без дочерних элементов, то всё понятно, но сейчас возникла странность.
Почему дочерний блок во второй колонке сместился к низу колонок, в которых дочерних блоков больше?
.column { display: inline-block }
.div1 { background: cyan }
.div2 { background: brown }
Ответ
Значение по умолчанию для свойства 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 }
Когда верстаю элементы без дочерних элементов, то всё понятно, но сейчас возникла странность.
Почему дочерний блок во второй колонке сместился к низу колонок, в которых дочерних блоков больше?
.column { display: inline-block }
.div1 { background: cyan }
.div2 { background: brown }
div1
div2
div1
div1
div2
Ответ
Значение по умолчанию для свойства 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 }
baseline
значение по умолчанию div1
div2
div1
div1
div2
middle
  div1
div2
div1
div1
div2
top
  div1
div2
div1
div1
div2
