Свойство CSS padding-top

Свойство padding-top задаёт отступ сверху для элемента.

INFO

Отрицательные значения недопустимы.

INFO

Это свойство не влияет на строчные элементы, такие как <span>.

Начальное значение	0
Применяется к	Ко всем элементам, за исключением случаев, когда свойство display установлено в table-row-group, table-header-group, table-footer-group, table-row, table-column-group или table-column. Также применяется к ::first-letter.
Наследуется	Нет.
Анимация	Да. Отступы можно анимировать.
Версия	CSS1
Синтаксис DOM	object.style.paddingTop = "10px";

Синтаксис

Синтаксис свойства CSS padding-top

css

padding-top: length | initial | inherit;

Пример использования свойства padding-top:

Пример свойства CSS padding-top со значением в пикселях

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        border: 2px solid #666;
        color: #8ebf42;
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Padding-top property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Результат

Свойство CSS padding-top

Пример свойства padding-top, заданного в единицах "em".

Пример свойства CSS padding-top со значением в единицах em

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        border: 2px solid #666;
        color: #8ebf42;
        padding-top: 4em;
      }
    </style>
  </head>
  <body>
    <h2>Padding-top property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Пример свойства padding-top, заданного в процентах:

Пример свойства CSS padding-top со значением в процентах:

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      p {
        border: 2px solid #cccccc;
        color: #8ebf42;
        padding-top: 15%;
      }
    </style>
  </head>
  <body>
    <h2>Padding-top property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
length	Задаёт верхний отступ в px, pt, cm и т. д. Значение по умолчанию — 0.	Запустить »
%	Задаёт верхний отступ в % от ширины родительского элемента.	Запустить »
initial	Устанавливает для свойства значение по умолчанию.	Запустить »
inherit	Наследует значение свойства от родительского элемента.

Практика

Какова функция CSS-свойства 'padding-top'?

Задаёт верхний отступ элемента.Задаёт нижний отступ элемента.Изменяет цвет верхней границы элемента.Управляет пространством между границей элемента и его содержимым сверху.Выравнивает текст по верхнему краю элемента.

Свойство CSS padding-top ​

Синтаксис ​

Пример использования свойства padding-top: ​

Результат ​

Пример свойства padding-top, заданного в единицах "em". ​

Пример свойства padding-top, заданного в процентах: ​

Значения ​

Практика ​

Свойство CSS padding-top

Синтаксис

Пример использования свойства padding-top:

Результат

Пример свойства padding-top, заданного в единицах "em".

Пример свойства padding-top, заданного в процентах:

Значения

Практика