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

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

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

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

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

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

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

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

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

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

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

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

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



   HTML и CSS 1    1434 +1

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.