css властивість padding-right


Властивість padding-right встановлює значення поля від правого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.

Властивість `padding-right`

Ви також можете використовувати властивість padding для скороченого запису padding-top, padding-right, padding-bottom і padding-left.

Якщо елемент має вказану ширину, будь-яке додавання до цього елемента полів, буде збільшувати його загальну ширину, що часто є небажаним результатом. Щоб вирішити цю проблему, зберігаючи встановлену ширину елемента, незалежно від розміру полів, ви можете скористатись властивістю box-sizing.

автор: Svitlana

Нотатка

Від'ємні значення не допускаються.

автор: Svitlana
Нотатка

CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово auto.

автор: Svitlana

Синтаксис

padding-right: length|initial|inherit;

Властивість padding-right може отримувати 4 значень:

length

Встановлює відстань поля у px, pt, cm та інших одиниця, що прийняті в CSS.

автор: Svitlana

%

Встановлює відступ у відсотках відносно ширини елементу.

автор: Svitlana

initial

Встановлює властивість у значення без задання

автор: Svitlana

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

Значення без задання: 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.paddingRight="50px"

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft Internet Explorer
padding-right 1.0 1.0 1.0 3.5 4.0
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Mozilla Firefox Mobile Apple Safari
padding-right 1.0 1.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

Внутрішній відступ 2см лише праворуч — текст не підходить до правої рамки ближче, ніж на 2см.

HTML

<p class="pad">Абзац із відступом 2см праворуч: текст переноситься раніше, ніж сягає правої рамки.</p>
<p>Звичайний абзац.</p>

CSS

p {
    border: 1px solid #0172ad;
    background: #eef6ff;
}

.pad {
    padding-right: 2cm;
}
автор: Svitlana

Динамічний приклад

автор: Svitlana

Демонстрація роботи властивості

автор: Svitlana

Як задати праве поле для елементу за допомогою властивості padding-right.

автор: Svitlana

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід