css властивість padding-top

Властивість padding-top встановлює значення поля від верхнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.

Ви також можете використовувати властивість padding для скороченого запису padding-top, padding-right, padding-bottom і padding-left.

Якщо елемент має вказану ширину, будь-яке додавання до цього елемента полів, буде збільшувати його загальну ширину, що часто є небажаним результатом.

Щоб вирішити цю проблему, зберігаючи встановлену ширину елемента, незалежно від розміру полів, ви можете скористатись властивістю box-sizing.

правити

Нотатка

Від'ємні значення не допускаються.

автор: Svitlana правити

Нотатка

CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово auto.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

padding-top: length|initial|inherit;

Властивість padding-top може отримувати 4 значень:

length

Встановлює відстань поля у px, pt, cm та інших одиниця, що прийняті в CSS.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

%

Встановлює відступ у відсотках відносно ширини елементу.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
padding-top	1.0	1.0	1.0	3.5	4.0

Підтримка: мобільні переглядачі

Переглядач
padding-top	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="pad">Абзац із відступом 2см зверху.</p>
<p>Звичайний абзац.</p>

p {
    border: 1px solid #0172ad;
    background: #eef6ff;
}

.pad {
    padding-top: 2cm;
}