Любой элемент на странице - это прямоугольная коробка из четырёх вложенных частей: контент (само содержимое), padding (отступ внутри рамки), border (сама рамка) и margin (отступ снаружи рамки, до соседних элементов). По умолчанию padding и border добавляются к заданной ширине и высоте, увеличивая итоговый видимый размер элемента.
В этом уроке
Попробуй прямо сейчас: увеличь padding или border у .box - видимый размер жёлтого блока вырастет, хотя width так и остаётся 200px.
Четыре части блочной модели: контент, padding, border и margin
Контент - это то, что реально внутри (текст, картинка, другие элементы). padding - прозрачный отступ вокруг контента, но ещё внутри рамки - фон элемента (background-color) заливает и контент, и padding. border - сама видимая рамка, со своей толщиной, стилем и цветом. margin - отступ уже СНАРУЖИ рамки, до соседних элементов - и в отличие от padding, margin никогда не закрашивается фоном самого элемента.
background-color: gold; padding: 20px; - золотой фон зальёт и контент, и весь padding вокруг него.
Ожидание, что background-color закрасит ещё и margin - margin остаётся прозрачным всегда, через него виден фон того, что находится позади (страницы или родителя).
Как padding и border увеличивают видимый размер элемента
По умолчанию width и height задают размер только самого контента - padding и border добавляются СВЕРХ этого размера, а не забирают место у контента. Например у блока с width: 200px, padding: 20px с каждой стороны и border: 5px с каждой стороны реальный видимый размер получится 200 + 20 + 20 + 5 + 5 = 250px, а не 200px. Это поведение по умолчанию можно изменить свойством box-sizing - но это уже тема отдельного урока дальше в этой же группе.
Закладывать padding и border в расчёты заранее - если элемент должен занимать ровно 250px вместе со всем оформлением, в width нужно указывать 200px, а не 250px.
width: 250px; в расчёте на то, что это и есть итоговый видимый размер - при добавленных padding и border итоговая ширина окажется ещё больше, чем 250px.
Где заканчивается элемент и начинается сосед: margin
margin находится снаружи border и не входит в "тело" самого элемента - именно поэтому у него нет своего фона, только пустое (прозрачное) пространство. margin используется для расстояния между элементами: он не увеличивает видимый размер самого блока (в отличие от padding и border), а просто отодвигает соседние элементы дальше.
margin: 20px; - вокруг элемента появляется зазор до соседей, сам элемент при этом не становится "толще".
Путают margin с padding, когда на самом деле нужно увеличить отступ ВНУТРИ рамки - margin раздвинет элемент и соседей, а не контент и рамку самого элемента.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не учитывают, что padding и border добавляются к заданной ширине | Итоговый видимый размер блока оказывается больше, чем указано в width/height | Закладывать padding и border в расчёты заранее или использовать box-sizing: border-box |
| Ожидают, что фон элемента (background-color) закрасит и область margin тоже | margin всегда остаётся прозрачным - через него виден фон того, что позади | Если нужен цветной отступ, использовать padding, а не margin |
| Путают padding и margin местами | Задают отступ не с той стороны рамки - визуально может быть похоже, но затрагивает разные части блока | padding - "внутри" рамки, вокруг контента; margin - "снаружи" рамки, до соседей |
| Рассчитывают на невидимую ширину border, который явно не задан | Без border его ширина по умолчанию равна нулю, никакого места он не занимает | Если нужен просто отступ без видимой рамки - использовать padding, а не border с нулевой шириной |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Отступ внутри рамки, вокруг контента | padding: 20px; |
| Видимая граница элемента | border: 2px solid #333; |
| Отступ снаружи рамки, до соседей | margin: 16px; |
| Итоговая видимая ширина (по умолчанию) | width + padding с двух сторон + border с двух сторон |
| Отступы по отдельным сторонам | padding-top/right/bottom/left (то же для margin) |
| Включить width/height в итоговый размер | box-sizing: border-box; (подробнее - в отдельном уроке) |
Коротко: отвечаем на вопросы
Чем padding отличается от margin, если оба - это просто отступы?
padding - отступ ВНУТРИ рамки элемента, между границей и самим контентом - он заливается фоном элемента. margin - отступ СНАРУЖИ рамки, до соседних элементов - он всегда прозрачный и не относится к "телу" самого элемента.
Почему элемент на странице шире, чем значение, указанное в width?
По умолчанию width задаёт размер только контента - padding и border добавляются сверх него, увеличивая итоговый видимый размер. Если нужно, чтобы width сразу включал в себя padding и border, для этого существует свойство box-sizing: border-box (отдельная тема).
