CSS :: Свойство padding-left
css-свойство padding-left (от англ. left padding – отбивка слева) используется для установки внутреннего отступа (отбивки) с левой стороны элемента.
Под внутренним отступом элемента подразумевается расстояние от внутренней стороны линии границы текущего элемента до соответствующей воображаемой стороны прямоугольника, ограничивающего содержимое элемента (см. рисунок №1).
Рис №1. Общая схема элемента
Следует отметить, что внутренние отступы влияют на размеры самого элемента, являясь частью его конструкции, в отличие от внешних отступов, которые элементу не принадлежат и на его размеры не влияют.
По умолчанию браузеры могут устанавливать для различных элементов ненулевые внутренние отступы. Однако их можно легко обнулить, использовав в таблице стилей универсальный селектор и значение padding равное нулю.
Характеристики
- Значение по умолчанию: 0.
- Применяется: ко всем элементам, кроме элементов, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.paddingLeft="value".
Синтаксис
padding-left: [<размер> | <проценты>]
Значения
- размер – принимаются любые единицы измерения (смотреть), используемые в CSS. Разрешаются только положительные значения.
- проценты – величина внутреннего отступа в процентах, которые рассчитываются относительно ширины области содержимого родительского элемента. Разрешаются только положительные значения.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/box.html#propdef-padding-left
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/padding-left
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Прием предварительного обнуления */ /* всех отступов у всех элементов */ *{ margin: 0; padding: 0; outline: 0; } p{ width: 500px; border: solid 2px green; } /* Внешние и внутренние отступы в одном объявлении */ .all_in_one{ margin: 50px 0px 50px 100px; padding: 20px 10px 20px 10px; } /* Внешние и внутренние отступы по отдельности */ .separate{ margin-top: 50px; margin-right: 0px; margin-bottom: 50px; margin-left: 100px; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } </style> </head> <body> <p class="all_in_one"> Внешние и внутренние отступы в одном объявлении<br> margin: 50px 0px 50px 100px;<br> padding: 20px 10px 20px 10px; </p> <p class="separate"> Тоже самое, но по отдельности<br> margin-top: 50px;<br> margin-right: 0px;<br> margin-bottom: 50px;<br> margin-left: 100px;<br><br> padding-top: 20px;<br> padding-right: 10px;<br> padding-bottom: 20px;<br> padding-left: 10px; </p> </body> </html>
Пример №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №2</title> <style> p{ width: 500px; border: solid 2px green; } /* Отступы в процентах в одном объявлении */ .all_in_one{ margin: 10%; padding: 5%; } /* Отступы в процентах по отдельности */ .separate{ margin-top: 10%; margin-right: 10%; margin-bottom: 10%; margin-left: 10%; padding-top: 5%; padding-right: 5%; padding-bottom: 5%; padding-left: 5%; } </style> </head> <body> <p class="all_in_one"> Отступы в процентах в одном объявлении<br> margin: 10%;<br> padding: 5%; </p> <p class="separate"> Тоже самое, но по отдельности<br> margin-top: 10%;<br> margin-right: 10%;<br> margin-bottom: 10%;<br> margin-left: 10%;<br><br> padding-top: 5%;<br> padding-right: 5%;<br> padding-bottom: 5%;<br> padding-left: 5%; </p> </body> </html>
Пример №2