Після його вивчення Ви зможете розташовувати елементи на сторінці, задавати між ними відступи, створювати їх всередині окремого конкретного блоку, задавати поля.
padding - це властивість, яке служить для встановлення кількості полів у елемента від внутрішнього краю кордону до вмісту. Вмістом може бути звичайний текст, зображення або дочірній елемент, який так само може мати свої поля.
Одиницями виміру можуть бути пікселі (px) або процентне співвідношення (%).
Є можливість вказати поле тільки з однією певною боку:
padding-top - властивість, що створюють поля зверху.
padding-right - властивість, що створюють поля праворуч.
padding-bottom - властивість, що створюють поля знизу.
padding-left - властивість, що створюють поля зліва.
Як Ви помітили, якщо вказувати таким чином поля з 2-х або 3-х сторін, то вийде довгий код. Для цього існує скорочений запис властивості padding. У ній по черзі вказується все 4 значення - від кожного краю в один рядок, рух йде за годинниковою рядку, починаючи з верхнього:
padding: ВерхнійОтступ ПравийОтступ ОтступСнізу ОтступСлева;
Властивість margin, на відміну від padding, встановлює величину відступу між кордонами елементами.
Якщо елемент є дочірнім, то відступом є простір від кордону елемента до внутрішнього краю кордону батька.
Якщо у елемента відсутній батько, то відступом вважається встановлений властивістю вільний простір до країв рамки оточуючих елементів.
Для вказівки відступів лише з певних сторін існують такі властивості:
margin-top - властивість, що створюють відступи зверху.
margin-right - властивість, що створюють відступи справа.
margin-bottom - властивість, що створюють відступи знизу.
margin-left - властивість, що створюють відступи зліва.
Як і у властивості padding, у margin теж є можливість скороченою записи значень для різних сторін. Рух йде за годинниковою стрілкою, з верхнього поля:
margin: ВерхнійОтступ ПравийОтступ ОтступСнізу ОтступСлева;
Дякую за увагу!
Середня оцінка статті: 4.33 бал