CSS приклад: padding

Тег для CSS - padding

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

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

Синтаксис

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

Значення

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

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

Приклад

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

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

[window.]document.getElementById("elementID").style.padding

Браузери

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

Поля

Часті запитання

  • Q: Як використовувати padding в CSS?

    A: Padding в CSS використовується для встановлення відступів від внутрішніх меж елемента.

  • Q: Як встановити різний padding для кожного краю елемента в CSS?

    A: У CSS можна встановити різний padding для кожного краю елемента за допомогою властивостей padding-top, padding-right, padding-bottom, padding-left.

  • Q: Як використовувати від'ємне значення padding в CSS?

    A: В CSS можна використовувати від'ємне значення padding для зменшення розміру внутрішнього простору елемента.

  • Q: Чи можна використовувати відсотки для встановлення padding в CSS?

    A: Так, в CSS можна використовувати відсотки для встановлення padding, якщо вони задаються відносно ширини батьківського елемента.

  • Q: Як використовувати shorthand властивість padding в CSS?

    A: У CSS можна скоротити запис властивостей padding за допомогою shorthand запису, наприклад, padding: 10px 20px 15px 5px; (зверху, справа, знизу, зліва).