Margin и Padding
Переклад українською: Margin та Padding
margin и padding являются наиболее популярными свойствами для расстановки элементов. В то время как margin определяет пространство за пределами (снаружи) элемента, padding определяет пространство внутри элемента.
Пример CSS для h2
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
Вы заметите, что пространство шириной в один знак (margin) было оставлено около заголовка второго уровня, а сам заголовок стал толще в результате padding, равного 3 знакам.
Вы можете задавать margin и padding для четырех сторон элемента по отдельности: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left.
Блочная модель
Margin, padding и border – это части так называемой Блочной модели. Механизм Блочной модели следующий:
- Посередине есть зона контента (Content)
- Ее окружает
padding - Вокруг padding находится
border - Внешним слоем является
margin
Визуально это можно представить так:
Margin box
Border box
Padding box
Element box
Не обязательно использовать все эти элементы, но блочная модель может использоваться с любым элементом на странице и является мощным инструментом.