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


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

Властивість `padding-top`

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

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

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

Нотатка:

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

Нотатка:

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

Синтаксис

padding-top: length|initial|inherit;

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

length

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

%

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

initial

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

inherit

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

Значення без задання: 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.paddingTop="50px"

Переглядачі

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

1.0

4.0

1.0

1.0

3.5

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

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Демонстрація роботи властивості

Як задати верхнє поле для елементу за допомогою властивості padding-top.

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

p {


    padding-top: 2cm;


}

Додаткові посилання