padding-top
Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле сверху от текста
Синтаксис
padding-top: значение | inherit
Значения
Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.
HTML5 CSS2.1 IE Cr Op Sa Fx
padding-top
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства padding-top
Объектная модель
[window.]document.getElementById(» elementID «).style.paddingTop
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
padding
Внутренний отступ, от края элемента до вложенного в него контента.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Егор Левченко ,
- Светлана Коробцева
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство padding — или внутренний отступ — позволяет оттолкнуть контент от границ родительского элемента.
Само свойство padding это шорткат, позволяющий задать отступы сразу со всех четырёх сторон.
Можно управлять отступами по отдельности при помощи свойств padding — top , padding — left , padding — right , padding — bottom .
Или при помощи логических свойств padding — block , padding — block — start , padding — block — end , padding — inline , padding — inline — start , padding — inline — end .
Пример
Скопировать ссылку «Пример» Скопировано
Сублимация, как бы это ни казалось парадоксальным, .
div class="parent"> p class="content">Сублимация, как бы это ни казалось парадоксальным, . p> div>
Для наглядности зададим фон родителю:
.parent background-color: #2E9AFF;> .parent background-color: #2E9AFF; >
�� Попробуй менять размеры окна браузера и понаблюдать за поведением обоих блоков. Первый будет всегда сохранять пропорции 16:9, а вот второй всегда будет высотой 200 пикселей.
Таблица значений padding-bottom для разных стандартных соотношений сторон:
Соотношение сторон
padding-bottom
16:9
56.25%
4:3
75%
3:2
66.66%
8:5
62.5%
CSS свойство padding-top
Это свойство устанавливает размер верхнего поля элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Внимание: Отрицательные значения запрещены.
CSS синтаксис
padding-top: размер | auto | initial | inherit;
Возможные значения
Значение
Описание
auto
Браузер автоматически устанавливает размер верхнего поля.
размер
Устанавливает размер верхнего поля в единицах CSS — пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0.
%
Устанавливает размер верхнего поля в процентах от ширины родительского элемента.
inherit
Значение наследуется от родительского элемента.
initial
Устанавливает значение по умолчанию.
Пример использования
Устанавливаем размер верхнего поля элемента
CSS свойство padding-top
Свойство padding-top устанавливает отступ с верхней стороны элемента.
Отрицательные значения недопустимы.
Это свойство не имеет эффекта на строчных элементах, подобно .
Значение по умолчанию
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»;
Синтаксис
padding-top: length | initial | inherit;
Пример
html> html> head> title>Заголовок документа title> style> p < border: 2px solid #666; color: #8ebf42; padding-top: 30px; > style> head> body> h2>Пример свойства padding-top h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> body> html>
Пример, где значение установлено в единице измерения «em»:
Пример
html> html> head> title>Заголовок документа title> style> p < border: 2px solid #666; color: #8ebf42; padding-top: 4em; > style> head> body> h2>Пример свойства padding-top h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> body> html>
Значения
Значение
Описание
length
Устанавливает отступ в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию — 0.
%
Устанавливает отступ в процентах.
initial
Устанавливает свойство в значение по умолчанию.
inherit
Значение элемента наследуется от родительского элемента.