padding-left¶
Свойство padding-left устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12
/* values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* value */ padding-left: 10%; /* Global values */ padding-left: inherit; padding-left: initial; padding-left: unset; Значения¶
Величину левого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах.
Значение по-умолчанию: 0
Применяется ко всем элементам
Спецификации¶
- CSS Box Model Module Level 3
- CSS Basic Box Model
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
html> head> meta charset="utf-8" /> title>padding-lefttitle> style> .layer background: #fc3; /* Цвет фона */ border: 2px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ > .layer p margin: 0; /* Убираем отступы вокруг */ padding-left: 10%; /* Поле слева */ > style> head> body> div class="layer"> p> Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь. p> div> body> html> CSS свойство padding-left
Это свойство устанавливает размер левого поля элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Внимание: Отрицательные значения запрещены.
CSS синтаксис
padding-left: размер | auto | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| auto | Браузер автоматически устанавливает размер левого поля. |
| размер | Устанавливает размер левого поля в единицах CSS — пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0. |
| % | Устанавливает размер левого поля в процентах от ширины родительского элемента. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем размер левого поля элемента
CSS свойство padding-left
Свойство padding-left устанавливает отступ с левой стороны элемента.
Отрицательные значения недопустимы.
Это свойство не имеет эффекта на строчных элементах, подобно .
| Значение по умолчанию | 0 |
| Применяется | Ко всем элементам, кроме тех случаев, когда свойство display имеет значения table-row-group, table-header-group, table-footer-group, table-row, table-column-group и table-column. Также применяется к ::first-letter. |
| Наследуется | Нет |
| Анимируемое | Да. Отступ анимируем. |
| Версия | CSS1 |
| DOM синтаксис | object.style.paddingLeft = «40px»; |
Синтаксис
padding-left: length | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> p < border: 2px solid #000; color: #1c87c9; padding-left: 100px; > style> head> body> h2>Пример свойства padding-left h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> body> html>Рассмотрим другой пример, где отступ равен «2cm»:
Пример
html> html> head> title>Заголовок документа title> style> p < border: 2px solid #000; color: #1c87c9; padding-left: 3cm; > style> head> body> h2>Пример свойства padding-left h2> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. p> body> html>Значения
| Значение | Описание |
|---|---|
| length | Устанавливает левый отступ в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию — 0px. |
| % | Устанавливает левый отступ в процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поля и отступы CSS: отличия свойств margin и padding
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
- padding-top: значение;
- padding-right: значение;
- padding-bottom: значение;
- padding-left: значение;
Поля:
- margin-top: значение;
- margin-right: значение;
- margin-bottom: значение;
- margin-left: значение;
Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .
Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
-
4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:
padding: 2px 4px 5px 10px;
padding: 3px 6px 9px;
padding: 6px 12px;
padding: 3px;
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px ), которые иногда бывают весьма полезными.
Схлопывание margin
Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
- Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
- Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
20 + (-18) = 20 — 18 = 2 пикселя. - Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 8 , то есть, -6 > -8 . Итоговый размер поля равен -8 пикселей.
- В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
- Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.