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

Блочный элемент – этой такой элемент, который занимает всю ширину строки по умолчанию. Блочный элемент может содержать другие блочные или строчные элементы 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-right – margin-left – border-right – border-left – padding-right – padding-left.

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

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

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

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