Каждый элемент на странице — это прямоугольник. Блочная модель описывает, из каких частей он состоит и как эти части влияют на размер и расположение.

Схема блочной модели:

1. Ширина и высота — width, height

Задают ширину и высоту элемента. Как именно они работают, зависит от свойства box-sizing (см. раздел 6).

По умолчанию (content-box) width задаёт только ширину содержимого. padding и border добавляются сверху.

При border-box width включает в себя padding и border.

Возможные значения:

• px — пиксели
• % — проценты от родителя
• auto — автоматический размер (по умолчанию)
• vw, vh — проценты от окна браузера

.box {
    width: 200px;
    height: 100px;
}

2. Внутренние отступы — padding

Расстояние от границы содержимого до границы элемента. Увеличивает видимый размер элемента. Фон и граница распространяются на область padding.

Возможные значения: пиксели, em, rem, проценты.

.no-padding {
    background: #f0f0f0;
}
.with-padding {
    background: #f0f0f0;
    padding: 20px;
}

3. Внешние отступы — margin

Расстояние от границы элемента до соседних элементов. Не увеличивает видимый размер элемента, но влияет на расположение. Фон и граница не распространяются на margin.

Возможные значения: пиксели, em, rem, auto (центрирование), проценты.

Пример: разница между padding и margin наглядно

.parent {
    background: #f0f0f0;
}
.child-padding {
    background: #530899;
    padding: 20px;
}
.child-margin {
    background: #14b8a6;
    margin: 20px;
}

4. Границы — border

Линия вокруг элемента. Требует три параметра: толщину, стиль и цвет.

Возможные значения стилей границ:

• solid — сплошная линия
• dashed — штриховая линия
• dotted — точечная линия
• double — двойная линия
• none — без границы (по умолчанию)

.solid {
    border: 2px solid #530899;
}
.dashed {
    border: 2px dashed #14b8a6;
}
.dotted {
    border: 2px dotted #ffc107;
}

5. outline — обводка (не влияет на размер)

Похожа на border, но не увеличивает размер элемента и не влияет на расположение соседей. Часто используется для подсветки активных элементов (например, при фокусе на поле ввода).

.outline-example:focus {
    outline: 3px solid #14b8a6;
}

6. Разница между padding и margin

padding	margin
Внутренний отступ (внутри элемента)	Внешний отступ (снаружи элемента)
Увеличивает видимый размер элемента	Не увеличивает видимый размер
Фон и граница распространяются на padding	Фон и граница не затрагивают margin

7. box-sizing — как считаются размеры

Свойство box-sizing определяет, включаются ли padding и border в ширину и высоту.

Возможные значения:

• content-box (по умолчанию) — width задаёт только ширину содержимого. padding и border прибавляются сверху.
• border-box — width включает в себя содержимое, padding и border. Самый удобный вариант.

.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #530899;
    /* реальная ширина: 200 + 40 + 4 = 244px */
}
.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 2px solid #530899;
    /* реальная ширина: 200px */
}

8. display — как элемент ведёт себя на странице

В HTML у каждого элемента есть тип по умолчанию: блочный (<div>, <p>) или строчный (<span>, <a>). Свойство display позволяет изменить это поведение.

Возможные значения:

• block — элемент занимает всю ширину родителя, переносит строку до и после себя
• inline — элемент располагается в строке, ширина по содержимому, нельзя задать width/height
• inline-block — как inline, но можно задать width/height и отступы
• none — полностью удаляет элемент со страницы (место исчезает)
• flex — делает элемент флекс-контейнером (будет дальше)
• grid — делает элемент грид-контейнером (будет будет дальше)

inline-block — когда нужен

Представьте меню из кнопок, которые должны стоять в строку, но иметь фиксированную ширину и отступы. Без display: inline-block пришлось бы использовать Flexbox или обходить костылями.

.menu-item {
    display: inline-block;
    width: 120px;
    padding: 10px;
    text-align: center;
}

none — полное удаление элемента

В отличие от visibility: hidden, который скрывает элемент, но оставляет место, display: none полностью убирает элемент из потока.

.hidden {
    display: none;
}