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 – це частини так званої Блокової моделі. Механізм Блокової моделі наступний: Посередині є зона контенту, яку оточує padding, оточений межею border, яка в свою чергу оточена полями margin. Візуально подання Блокового моделі виглядає так:
Не обов’язково використовувати всі ці елементи, але блокова модель може використовуватися з будь-яким елементом на сторінці, і це потужний інструмент.