CSS - Размеры блочных элементов

CSS - Размеры блочных элементов
Содержание:
  1. Комментарии

Блочный элемент – этой такой элемент, который занимает всю ширину строки по умолчанию. Блочный элемент может содержать другие блочные или строчные элементы HTML. Визуально блочный элемент можно представить в виде прямоугольника, у которого есть внешние отступы (margin), границы (border) и внутренние отступы (padding), для содержимого, которое в него помещено.

Из чего складывается итоговая ширина блока

Внешние отступы (margin) не влияют на итоговый размер блочного элемента, зато они оказывают влияния на соседние элементы.

Итак,
Итоговая ширина = width + padding-left + padding-right + border-left + border-right.
Итоговая высота = height + padding-top + padding-bottom + border-top + border-bottom.

Ширина (width) блочных элементов, у которых ширина не установлена

Блок у которого не установлена ширина занимает всю ширину контейнера. В таком случае браузером рассчитывает ширину автоматически, но она не равна 100% ширины контейнера.

Из чего складывается ширина блока по умолчанию

Ширину дочернего блока можно рассчитать по формуле:
width = width (ширина родительского блока)margin-rightmargin-leftborder-rightborder-leftpadding-rightpadding-left.

Если дочернему элементу явно указать ширину 100% то мы получим следующую картину:

Ширина дочернего блока равна 100%

«Схлопывание» внешних вертикальных отступов (margin)

Вертикальный внешний отступ (margin-top и margin-bottom) между блочными элементами равен не сумме отступов между ними, а наибольшему из них.

Схлопывание внешних вертикальных отступов

Горизонтальные внешние отступы между блочными элементами не «схлопываются» и равны они сумме горизонтальных отступов между этими элементами.

Комментарии: 0