Опис

Встановлює значення полів навколо вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує вміст (рис. 1).

Властивість padding дозволяє встановити величину поля відразу для всіх сторін елемента або визначити її тільки для зазначених сторін.

Синтаксис

padding: [значення | відсотки] (1, 4) | inherit

Значення

Дозволяється використовувати одне, два, три або чотири значення, розділяючи їх між собою пробілом. Ефект залежить від кількості значень та наведено в табл. 1.

Величину полів можна вказувати у пікселах (px), відсотках (%) або інших допустимих для CSS одиницях. Значення inherit показує, що воно успадковується у батька. При вказівці поля у відсотках значення вважається від ширини батька елемента.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат даного прикладупоказано на рис. 2.

Рис. 2. Застосування якості padding

Об'єктна модель

document.getElementById("elementID ").style.padding

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

У попередньому розділі ми згадували такі властивості CSS, як margin (поле) і padding (відступ). Тепер ми зупинимося на них детальніше і розглянемо, чим вони відрізняються один від одного і які особливості мають.

Створювати проміжки між елементами можна і тим, і іншим способом, але якщо padding – це відступ від вмісту до краю блоку, margin – це відстань від одного блоку до іншого, міжблоковий простір. На скріншоті показаний наочний приклад:

Padding відокремлює вміст межі блоку, а margin створює проміжки між блоками

Як бачите, поля та відступи CSS відрізняються між собою, хоч іноді без перегляду коду і не можна визначити, за допомогою якої властивості задано відстань. Це трапляється у випадках, коли відсутня рамка або фон блоку з вмістом.

Для встановлення полів або відступів CSS від кожної сторони елемента існують наступні властивості:

Відступи:

• padding-top: значення;
• padding-right: значення;
• padding-bottom: значення;
• padding-left: значення;

Поля:

• margin-top: значення;
• margin-right: значення;
• margin-bottom: значення;
• margin-left: значення;

Значення можуть бути вказані в будь-яких одиницях CSS – px, em, % тощо. Приклад: margin-top: 15px .

Також існує дуже зручна річ як скорочений запис margin та padding CSS. Якщо вам необхідно задати поля або відступи для всіх чотирьох сторін елемента, не обов'язково записувати властивість для кожної сторони окремо. Все робиться простіше: margin і padding можна вказувати відразу 1, 2, 3 або 4 значення. Від кількості значень залежить, як розподіляються налаштування:

• 4 значення: задаються відступи для всіх сторін елемента в такій послідовності: зверху, праворуч, знизу, зліва: padding: 2px 4px 5px 10px;
• 3 значення: задається відступ спочатку для верхньої сторони, потім одночасно для лівої та правої, а потім – для нижньої: padding: 3px 6px 9px;
• 2 значення: задаються відступи спочатку одночасно від верхньої та нижньої сторони, а потім – одночасно для лівої та правої: padding: 6px 12px;
• 1 значення: задаються однакові відступи всіх сторін елемента: padding: 3px;

Ті ж правила стосуються властивості margin CSS. Зверніть увагу, що для margin можна використовувати і негативні значення (наприклад, -3px), які іноді бувають дуже корисними.

Схлопування margin

Уявіть ситуацію: два блокових елементи є один над одним і їм задані поля margin. Для верхнього блоку встановлено значення margin: 60px, а для нижнього – margin: 30px. Логічно було б припустити, що два поля, що межують, двох елементів просто стикнуться і в результаті проміжок між блоками дорівнюватиме 90 пікселям.

Проте справи по-іншому. Насправді в такій ситуації проявляється ефект, який називають схлопыванием, коли з двох полів елементів, що примикають, вибирається найбільший за розміром. У прикладі підсумковий проміжок між елементами дорівнює 60 пікселям.

Схлопування margin працює тільки для верхніх та нижніх полів елементів і не відноситься до полів з правої та лівої сторін. Остаточна величина проміжку обчислюється у різних ситуаціях по-різному:

• Коли обидва значення margin позитивні, підсумковий розмір поля дорівнюватиме більшому значенню.
• Якщо одне із значень є негативним, то для обчислення розміру поля необхідно отримати суму значень. Наприклад, при значеннях 20px і -18px розмір поля дорівнюватиме:
  20 + (-18) = 20 - 18 = 2 пікселя.
• Якщо обидва значення є негативними, порівнюються модулі цих чисел і вибирається число, більше за модулем (отже, найменше з негативних чисел). Приклад: необхідно порівняти значення полів -6px та -8px. Модулі порівнюваних чисел дорівнюють 6 і 8 відповідно. Звідси випливає, що 6 -8. Підсумковий розмір поля дорівнює -8 пікселів.
• У разі, коли значення вказані в різних одиницях CSS, вони наводяться до однієї, після чого порівнюються і вибирається більше значення.
• Розмір margin для дочірніх елементів визначається ще цікавіше: якщо у нащадка поле margin більше, ніж у батька, то пріоритет віддається йому. У цьому випадку розміри верхнього та нижнього полів батьків стануть такими, як задано у нащадка. При цьому відстані між батьком та нащадком не буде.

Ця властивість може мати від одного до чотирьох значень.

На зображенні світло-сірим кольором позначена зона, за яку відповідає властивість padding:

1. При вказівці чотирьох значень(5px 10px 15px 20px ) - порядок розміщення внутрішніх відступів буде наступний: Top(5px) - Right(10px) - Bottom(15px) - Left(20px). Для запам'ятовування порядку розміщення внутрішніх відступів в одному оголошенні можна використовувати англійське слово TR ou BL e(де T- top, R- right, B- bottom, L- Left).


2. При вказівці трьох значень(5px 10px 15px ) - порядок розміщення внутрішніх відступів буде наступний: Top(5px) - Right & Left(10px) - Bottom(15px).


3. При вказівці двох значень(5px 10px ) - перше значення(5px ) задаватиме розмір внутрішнього відступу від верху і від низу вмісту елемента, друге (10px ) значення - внутрішні відступи ліворуч і праворуч вмісту елемента.


4. При вказівці одного значення(5px) - внутрішній відступ з усіх боків буде одного розміру - 5px.

Підтримка браузерами

CSS синтаксис:

JavaScript синтаксис:

Object.style.padding = "5px"

Значення якості

Версія CSS

успадковується

Анімація

Приклад використання

Ця інструкція дозволить вам краще розуміти такі властивості CSSяк border, padding і margin. Ці властивості дуже допомагають розробникам позиціонувати елементи на сторінці відповідно до макету.

Давайте створимо div і надамо йому властивості margin, padding і border.

Властивість Padding

CSS властивість padding визначає відстань між межею елемента та його вмістом. Ви можете визначити його так:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px;
• padding-left: 10px;

Цей запис можна скоротити:

• padding:25px 50px 75px 100px;
  • зверху 25px
  • праворуч 50px
  • знизу 75px
  • зліва 100px
• padding:25px 50px 75px;
  • зверху 25px
  • праворуч і ліворуч 50px
  • знизу 75px
• padding:25px 50px;
  • зверху та знизу 25px
  • праворуч і ліворуч 50px
• padding:25px;
  • всі 25px

Увага: значення padding додається до ширини елемента та залежить від фону елемента.

Інакше кажучи, у нас є елемент div з класом div-1:

Div.div-1( width:150px; padding: 25px;)

Браузер додасть до ширини елемента лівий та правий padding. В результаті ми отримаємо елемент завширшки 200px.

Властивість Border

CSS властивість border дозволяє визначати стиль і колір межі елемента.

border-width

Властивість border-width застосовується визначення ширини кордону. Ширина задається в пікселях або за допомогою одного з наперед визначених значень: thin (тонка), medium (середня) або thick (товста).

border-color

Властивість border-color застосовується визначення кольору кордону. Колір може бути заданий такими способами:

• назва – назва кольору, наприклад, «red»
• RGB — визначає значення RGB, наприклад, «rgb(255,0,0)»
• Hex — визначає hex значення, наприклад «#ff0000»

border-style

• dotted: Визначає точний кордон
• dashed: Визначає пунктирний кордон
• solid: Визначає товстий кордон
• double: Визначає два кордони Відстань між ними залежить від значення border-width
• groove: Визначає об'ємний вдавлений кордон
• ridge: Визначає об'ємний опуклий кордон.
• inset: Визначає кордон так, що блок хитається втиснутим.
• outset: Визначає кордон так, що блок хитається опуклим

Ви можете записати властивості межі елемента укороченим чином:

Div.div-2( border:1px solid #ccc; )

Властивість Margin

CSS властивість margin визначає відстань навколо елемента. Margin звільняє відстань довкола елемента (зовні Border). Margin не має кольору тла і завжди залишається прозорим.

Ви можете визначити значення margin для елемента так:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

Цей запис можна скоротити:

• margin:25px 50px 75px 100px;
  • зверху margin 25px
  • справа margin 50px
  • знизу margin 75px
  • зліва margin 100px
• margin:25px 50px 75px;
  • зверху margin 25px
  • праворуч та ліворуч margin 50px
  • знизу margin 75px
• margin:25px 50px;
  • зверху та знизу margin 25px
  • праворуч та ліворуч margin 50px
• margin:25px;
  • всі чотири margin 25px

Використовуючи значення margin за замовчуванням, ви можете розташувати блок по центру грізонтально.

Властивість CSS padding відповідає за завдання відступів усередині елемента від його межі

Синтаксис CSS padding

padding: top right bottom left;

• top – відступ від верхньої межі елемента;
• right – відступ від правої межі елемента;
• bottom – відступ від нижньої межі елемента;
• left – відступ від лівої межі елемента;

Значення найчастіше задаються у пікселях. Допускається також завдання у вигляді відсотків та інших допустимих одиниць CSS.

Примітка 1
Допускається завдання не чотирьох значень. Залежно від кількості значень дії будуть різні:

• Якщо задано 3 значення, то перше значення встановлює відступ зверху, друге - одночасно ліворуч і праворуч, а третє - знизу
• Якщо задано 2 значення, то перше значення встановлює відступ зверху та знизу, друге – ліворуч та праворуч від вмісту
• Якщо встановлено 1 значення, то відступ задається однаковий відступ для всіх сторін. Наприклад:

padding : 10px 10px 10px 10px; Можна встановити компактніше: padding: 10px;

Примітка 2
На відміну від якості CSS margin негативні значення у padding не допустимі.

Також у padding є 4 окремі властивості CSS. Кожна з них відповідає за якийсь напрямок.

• padding-left – відступ від лівої межі елемента;
• padding-right – відступ від правої межі елемента;
• padding-top – відступ від верхньої межі елемента;
• padding-bottom – відступ від лівої межі елемента;

Наприклад

padding : 3px 5px 7px 10px; Або можна задати докладно: padding-left: 10px; padding-right: 5px; padding-top: 3px; padding-bottom : 7px;

Приклади з різними відступами всередині елемента

Приклад 1. Відступ тексту всередині тега

Приклад із нульовими відступами (padding: 0px)

Приклад з однаковим відступом усіх кордонів (padding: 10px)

Приклад з різними відступами (padding: 10px 0px 0px 30px)

Ось як це виглядає на сторінці:

Приклад із нульовими відступами (padding: 0px)

Приклад з однаковим відступом усіх кордонів (padding: 10px)

Приклад з різними відступами (padding: 10px 0px 0px 30px)

Приклад 2. Відступ об'єкта всередині об'єкту