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