> For the complete documentation index, see [llms.txt](https://appsecurity.gitbook.io/devops/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appsecurity.gitbook.io/devops/ppc/ppc-langs/frontend/css/svoistva/blochnaya-model-i-otstupy.md).

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

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

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

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

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

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