Блочная модель и отступы

Блочная модель и отступы

Для веб-браузера элементы страницы представляют небольшие контейнеры или блоки. Такие блоки могут иметь различное содержимое - текст, изображения, списки, таблицы и другие элементы. Внутренние элементы блоков сами выступают в качестве блоков.

Отступы могут иметь значения в пикселях, em (значения относительно шрифта элемента), процентных соотношениях (относительно ширины элемента-контейнера), либо auto (автоматическая установка отступов).

Помимо отступов — внешних (margin) и внутренних (padding) — у элементов есть границы.

Есть свойство box-sizing — оно определяет поведение границ и внутренних отступов. По умолчанию для всех элементов действует правило box-sizing: content-box, границы и внутренний отступ расширяют элемент.Установив для box-sizing значение border-box, вы измените фокус элемента: границы и внутренний отступ отрисуются внутрь. Общая ширина будет равна значению width. Довольно интуитивное поведение, поэтому нормальная практика — задать его сразу для всех элементов на странице.