CSS padding-right — внутрішній відступ справа
Властивість padding-right встановлює значення поля від правого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.
Ви також можете використовувати властивість padding для скороченого запису padding-top, padding-right, padding-bottom і padding-left.
Якщо елемент має вказану ширину, будь-яке додавання до цього елемента полів, буде збільшувати його загальну ширину, що часто є небажаним результатом. Щоб вирішити цю проблему, зберігаючи встановлену ширину елемента, незалежно від розміру полів, ви можете скористатись властивістю box-sizing.
Загальний опис
автор: NagarD
- Нотатка
-
Від'ємні значення не допускаються.
автор: Svitlana - Нотатка
-
CSS3 пропонує прибрати можливість використання в якості значень процентів, а також додати від'ємні значення, так само як і ключове слово
автор: Svitlanaauto.
Синтаксис
padding-right: length|initial|inherit;Властивість padding-right може отримувати 4 значень:
-
length -
Встановлює відстань поля у
автор: Svitlanapx, pt, cmта інших одиниця, що прийняті в CSS. -
% -
Встановлює відступ у відсотках відносно ширини елементу.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.paddingRight="50px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Внутрішній відступ 2см лише праворуч — текст не підходить до правої рамки ближче, ніж на 2см.
HTML
<p class="pad">Абзац із відступом 2см праворуч: текст переноситься раніше, ніж сягає правої рамки.</p>
<p>Звичайний абзац.</p>CSS
p {
border: 1px solid #0172ad;
background: #eef6ff;
}
.pad {
padding-right: 2cm;
}Поле праворуч звільняє місце під іконку: у другому полі його немає, і текст заїжджає під хрестик.
HTML
<label class="field">
<input type="text" value="Досить довгий текст у полі">
<span class="icon">✕</span>
</label>
<label class="field no-padding">
<input type="text" value="Досить довгий текст у полі">
<span class="icon">✕</span>
</label>CSS
body {
font-family: sans-serif;
padding: 16px;
}
.field {
position: relative;
display: block;
width: 240px;
margin-bottom: 14px;
}
.field input {
box-sizing: border-box;
width: 100%;
font-size: 15px;
padding: 8px;
padding-right: 34px;
}
.no-padding input {
padding-right: 8px;
}
.icon {
position: absolute;
top: 9px;
right: 10px;
color: #888;
}Динамічний приклад
HTML
<div class="box">
<div class="child">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>padding-right</strong>.</p>
<p>Вона встановлює значення для правого поля елемента на сторінці.</p>
<strong>padding-right: </strong>
<input type="number" class="input" id="val" value="8">px<strong>;</strong>
</div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
}
.box {
background-color: #f7f7f7;
border: 8px solid #F74C32;
padding: 8px 8px 8px 8px;
transition: padding .15s ease-in;
}
.child {
padding: 4px;
background-color: gold;
}
.input {
margin-bottom: 36px;
width: 75px;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var val = document.querySelector('#val').value;
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('padding-right', val + 'px'));
}));Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>padding-right</code> ми можемо встановити праве поле для елементу.</p>
<p>Нижче розташований блок (темного кольору), для якого, відносно бітьківсього елементу (він має жовтий фон), ми й додаємо праве поле (в даному прикладі - <em>25px</em>).</p>
</div>
<div class="wrapper">
<div class="block"><div class="content"></div></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
}
.info {
padding: 6px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
background-color: #ddd;
border: 2px solid #666;
overflow: hidden;
}
.block {
padding-right: 25px;
background-color: gold;
font-size: .8em;
text-align: center;
line-height: 75px;
}
.content {
width: 100%;
height: 100px;
background-color: #666;
}Як задати праве поле для елементу за допомогою властивості padding-right.
HTML
<div class="block block-1">
<code>padding-right: 12px;</code>
</div>
<div class="block block-2">
<code>padding-right: 5%;</code>
</div>
<div class="block block-3">
<code>padding-right: 0;</code>
</div>CSS
.block {
width: 250px;
height: 150px;
background-color: #eee;
border: 2px solid #666;
margin-bottom: 18px;
text-align: center;
line-height: 150px;
}
.block > code {
background-color: grey;
display: block;
}
.block-1 {
padding-right: 12px;
}
.block-2 {
padding-right: 5%;
}
.block-3 {
padding-right: 0;
}Коментарі
Коментарів ще немає — будьте першим!