CSS-свойство padding-top
Как использовать CSS-свойство padding-top для задания отступа сверху элемента. Значения свойства и примеры.
CSS-свойство padding-top задаёт высоту области внутреннего отступа на верхней стороне элемента — пространство между содержимым элемента (или его верхней границей) и содержимым выше него внутри блока.
Внутренний отступ — это самый внутренний слой блочной модели CSS: изнутри наружу располагаются содержимое, затем отступ (padding), затем граница (border), затем внешний отступ (margin). В отличие от margin, padding находится внутри элемента, поэтому он наследует фоновый цвет элемента и входит в его кликабельную/видимую область.
Используйте padding-top, когда нужно сдвинуть содержимое вниз от верхнего края контейнера — например, чтобы дать заголовку «воздух» ниже верхней границы карточки или добавить вертикальный ритм внутри кнопки или блока-выноски, не затрагивая расстояние между отдельными элементами (для этого существует margin).
Отрицательные значения не допускаются. Если нужно сдвинуть содержимое вверх, используйте отрицательный margin-top.
Это свойство не оказывает видимого влияния на строчные элементы, такие как <span> — вертикальный padding на строчном блоке не изменяет межстрочный интервал и не раздвигает соседние строки. Установите display: inline-block или display: block для элемента, если нужно, чтобы верхний padding работал.
| Начальное значение | 0 |
|---|---|
| Применяется к | Всем элементам, за исключением случаев, когда свойство display установлено в значения table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter. |
| Наследуется | Нет. |
| Анимируется | Да. Внутренний отступ поддерживает анимацию. |
| Версия | CSS1 |
| DOM Syntax | object.style.paddingTop = "10px"; |
Синтаксис
Синтаксис CSS-свойства padding-top
padding-top: length | initial | inherit;Пример использования свойства padding-top:
Пример CSS-свойства padding-top со значением в px
<!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>Результат
Пример свойства padding-top со значением в "em".
Пример CSS-свойства padding-top со значением в em
<!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>Значение em является относительным к размеру шрифта самого элемента, поэтому padding-top: 4em масштабируется вместе с текстом. Это удобно, когда нужно, чтобы отступ увеличивался и уменьшался вместе с размером шрифта.
Пример свойства padding-top, заданного в процентах:
Процентное значение имеет особенность: оно вычисляется относительно ширины содержащего блока, а не его высоты. Таким образом, padding-top: 15% означает 15% от ширины родительского элемента. Этот нюанс лежит в основе классической техники сохранения пропорций блока при его изменении размеров.
Пример CSS-свойства padding-top со значением "%":
<!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>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| length | Задаёт верхний отступ в px, pt, cm и т. д. Значение по умолчанию — 0. | Попробовать » |
| % | Задаёт верхний отступ в % от ширины содержащего элемента. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
padding-top и сокращённое свойство padding
padding-top управляет одной стороной. Когда нужно задать отступы сразу для нескольких сторон, короче использовать сокращённое свойство padding. Следующие два правила эквивалентны:
/* longhand */
padding-top: 30px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
/* shorthand: top right bottom left (clockwise) */
padding: 30px 10px 30px 10px;При двух значениях padding: 30px 10px задаёт верхнему/нижнему отступу 30px, а левому/правому — 10px. Используйте полную форму padding-top, когда нужно изменить только верхний отступ, не затрагивая остальные. Смотрите также padding-bottom для противоположной стороны.
Влияние padding-top на размер элемента
По умолчанию (box-sizing: content-box) padding добавляется к объявленной высоте height. Элемент с height: 100px и padding-top: 30px будет отрисован высотой 130px. Если задать box-sizing: border-box, padding будет располагаться внутри объявленной высоты, и элемент останется высотой 100px, а область содержимого уменьшится. Это частая причина ошибки «почему мой блок слишком высокий».