CSS приклад: padding-bottom

Тег CSS: padding-bottom

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

Синтаксис

padding-bottom: значення | inherit

Значення

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

Приклад

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding-bottom</title>
  <style>
   .layer {
    background: #fc3; /* Цвет фона */
    border: 2px solid #000; /* Параметры рамки */
    padding-bottom: 40px; /* Поле снизу от текста */
    padding-top: 40px; /* Поле сверху от текста */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <div class="layer">
   Lorem ipsum dolor sit amet
  </div>
 </body>
</html>

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

Браузери

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

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

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

    A: Властивість padding-bottom в CSS використовується для задання відступу знизу елементу. Наприклад: .element { padding-bottom: 20px; }

  • Q: Де використовують padding-bottom в CSS?

    A: padding-bottom використовують для створення відступу знизу елементу, щоб відокремити його від інших елементів або від краю контейнера.

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

    A: Так, можна використовувати від'ємне значення для padding-bottom, щоб збільшити зону заповнення вверх елементу або навіть накладати його на сусідні елементи.

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

    A: Значення відсотків для padding-bottom обчислюються відносно ширини батьківського елемента, що може бути корисним для створення адаптивного дизайну.

  • Q: Чому важливо правильно використовувати padding-bottom в CSS?

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