paddingВластивість в CSS визначає саму внутрішню частину моделі коробки, створюючи простір навколо вмісту елементу, усередині яких - або певних країв і / або меж.
Значення заповнення встановлюються з використанням довжини або відсотків і не можуть приймати від’ємні значення. Початкове значення за замовчуванням для всіх властивостей заповнення дорівнює 0.
Ось простий приклад:
.box ( padding: 0 1.5em 0 1.5em; )У наведеному вище прикладі використовується paddingскорочена властивість, яка приймає до чотирьох значень, показаних тут:
.box ( padding: || || || )Якщо встановлено менше чотирьох значень, відсутні значення приймаються на основі визначених. Наприклад, наступні два набори правил отримають однакові результати:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Таким чином, якщо визначено лише одне значення, це встановлює всі чотири властивості заповнення однаковим значенням:
.box ( padding: 20px; )Якщо оголошено три значення, це так padding: (top) (left-and-right) (bottom);.
Будь-яке з окремих властивостей заповнення можна оголосити за допомогою довгометра, і в цьому випадку ви б визначили лише одне значення для властивості. Тож попередній приклад можна було б переписати наступним чином:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Розрахунки оббивки та ширини елемента
Якщо елемент має задану ширину, будь-яке заповнення, додане до цього елемента, додасть до загальної ширини елемента. Це часто є небажаним результатом, оскільки вимагає перерахунку ширини елемента кожного разу, коли коригується відступ. (Зверніть увагу, що це також трапляється з висотою, але в більшості випадків бажано не надавати елементу задану висоту.)
Наприклад:
.box ( padding: 20px; width: 400px; )У цьому прикладі, хоча .boxелементу надається явна ширина 400 пікс., Фактична ширина відображення елемента на сторінці становитиме 440 пікселів. Це враховує не тільки ширину 400 пікселів, але також 20 пікселів лівого заповнення та 20 пікселів правого заповнення (визначене скороченим написом в попередньому прикладі).
Це відбувається для того, щоб підтримувати 400px простору вмісту, а не 400px загальної ширини елемента. Ось ручка, що демонструє це:
Це відбувається у всіх браузерах, що використовуються, у стандартному режимі, але не відбувається в IE6 та IE7 в режимі примх (тобто на сторінках, що відображаються в IE6 або IE7, де немає оголошеного типу доктрини або де щось інше викликає примхи режим).
Щоб вирішити цю проблему, підтримуючи таким чином ширину 400 пікселів незалежно від кількості заповнення, ви можете використовувати box-sizingвластивість:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Це змушує елемент зберігати свою ширину, одночасно збільшуючи відступи, тим самим зменшуючи доступний простір вмісту. Ось демонстрація:
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Так | Так | Так | Так | Так | Так | Так |