padding-block
Свойство padding-block определяет внутренний отступ одновременно от начального и конечного краёв элемента по блочной оси. Само положение краёв зависит от режима письма (свойство writing-mode).
В табл. 1 показано положение краёв блока при разных значениях writing-mode.
Код CSS | Положение краёв | Аналог | Вид |
---|---|---|---|
| Сверху и снизу |
| Джеймс Кук |
| Сверху и снизу |
| Джеймс Кук |
| Справа и слева |
| Джеймс Кук |
| Слева и справа |
| Джеймс Кук |
Краткая информация
Значение по умолчанию | 0 |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Да |
Синтаксис
padding-block: [<размер> | <проценты>] {1, 2}
Значения
Значение можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании в процентах, значение считается от ширины элемента.
Одно значение устанавливает внутренний отступ одновременно для двух краёв элемента. Два значения позволяют задать внутренний отступ сперва для начального края, затем для конечного края в блочном направлении.
Пример
Код примера скопирован в буфер
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>padding-block</title> <style> .menu { display: flex; /* Флексы */ background-color: #00627d; /* Цвет фона */ margin-bottom: 1rem; /* Расстояние снизу */ } .icon { color: #f8f6e4; /* Цвет иконок */ font-size: 1.2rem; /* Размер иконок */ } .text { white-space: nowrap; /* Запрет переноса текста */ } a { display: flex; /* Флексы */ flex-direction: column; /* Располагаются по вертикали */ align-items: center; /* Выравнивание по центру */ color: #fff; /* Цвет текста */ text-decoration: none; /* Убираем подчёркивание */ padding-inline: 1rem; /* Расстояние по строчной оси */ padding-block: 0.5rem; /* Расстояние по блочной оси */ } a:hover { background-color: #007c9e; /* Цвет фона при наведении */ } .menu:lang(ja) { writing-mode: vertical-lr; /* Вертикальный режим */ } </style> </head> <body> <div class="menu"> <a href="#"><span class="icon">♒︎</span><span class="text">Водолей</span></a> <a href="#"><span class="icon">♓︎</span><span class="text">Рыбы</span></a> <a href="#"><span class="icon">♈︎</span><span class="text">Овен</span></a> <a href="#"><span class="icon">♉︎</span><span class="text">Телец</span></a> <a href="#"><span class="icon">♊︎</span><span class="text">Близнецы</span></a> </div> <div class="menu" lang="ja"> <a href="#"><span class="icon">♒︎</span><span class="text">宝瓶宮</span></a> <a href="#"><span class="icon">♓︎</span><span class="text">双魚宮</span></a> <a href="#"><span class="icon">♈︎</span><span class="text">白羊宮</span></a> <a href="#"><span class="icon">♉︎</span><span class="text">金牛宮</span></a> <a href="#"><span class="icon">♊︎</span><span class="text">双児宮</span></a> </div> </body> </html>
Объектная модель
Объект.style.paddingBlock
Спецификация
Браузеры
79 | 69 | 56 | 12.1 | 41 |
69 | 41 | 48 | 12.2 |