Властивість CSS padding-left використовується для вказівки розміру лівого внутрішнього відступу елемента, який знаходиться між лівою кордоном його рамки (CSS border-left) і вмістом. На відміну від лівого зовнішнього поля (CSS margin-left), колір відступу завжди такий же, як фон елемента.
Розташування лівого внутрішнього відступу елемента - padding-left.
Якщо необхідно вказати внутрішні відступи зразу з усіх боків елемента, то можна використовувати властивість padding.
Тип властивості
Застосовується: до всіх елементів, крім тегів
.
. . . . і елементів з display рівним table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row.
Якщо до тегу
буде застосування властивостей CSS border-collapse: collapse, то padding-left буде проігнорований.
Значенням властивості CSS padding-left є вказівка розмірів лівого відступу одним із таких способів.
- Розмір - відстань в відносних або абсолютних одиницях виміру прийнятих в CSS, наприклад: пікселі (px), пункти (pt), сантиметри (cm) і т.д. Негативні значення заборонені.
- Відсотки - відстань у відсотках (%), де за 100% береться ширина елемента-предка за наступним алгоритмом:
- Для непозіціоніруемих і щодо позиціонуються (CSS position. Static або relative) розрахунок лівого відступу йде щодо ширини найближчого блочного (block) елемента-предка, вбудованого блоку (inline-block) або елементи таблиці, а якщо таких немає, то ширини тіла документа ( тег ).
- Процентний розмір лівого відступу самого тіла документа вважається відносно ширини кореневого елемента (тег ).
- Для елементів з position. fixed відступ вважається відносно ширини вікна браузера.
- Для елементів з position. absolute відступ вважається відносно ширини елемента, від якого йде позиціонування, причому з урахуванням його внутрішніх відступів, а якщо такого елемента немає, то щодо ширини вікна браузера.
Допускається вказувати негативні процентні значення.
- inherit - успадковує значення властивості padding-left від батьківського елемента.
Відсоткова запис: щодо ширини елемента-предка або вікна браузера.
Значення за замовчуванням: 0.
padding-left: розмір | відсотки | inherit
Приклад CSS: використання padding-left
Результат. Використання властивості CSS padding-left.
Схожі статті
