padding-block: внутренний отступ перед и после содержимого
Padding-block добавляет внутреннее пространство по блочной оси. Оно отделяет текст от краёв фона или рамки и остаётся частью оформляемого блока.
Назначение
Padding-block добавляет внутреннее пространство по блочной оси. Оно отделяет текст от краёв фона или рамки и остаётся частью оформляемого блока.
Как это работает
Два значения задают отступы в начале и конце блочной оси. В отличие от margin внутренние отступы не схлопываются. При явных размерах учитывайте box-sizing, чтобы контролировать итоговую геометрию.
Пример
<style>.padding-note{padding-block:1rem 2rem;padding-inline:1rem;border:1px solid #94b09d;background:#edf6f0}.padding-note p{margin:0}</style>
<aside class="padding-note"><p>Внутренний отступ сохраняет фон вокруг пояснения.</p></aside>Что должно получиться
В горизонтальном режиме под текстом остаётся больше внутреннего пространства, чем над ним. Фон закрашивает область отступов, а сам текст не получает дополнительных символов или пустых абзацев.
Граница применения и частая ошибка
Не создавайте расстояния пустыми абзацами и повторными br. Большие фиксированные отступы могут занять слишком много места на узкой странице. Процентные значения имеют особые правила расчёта, поэтому для первого примера используются rem.
Самостоятельная проверка
Поменяйте местами два значения и оцените положение текста. Добавьте рамку и сравните внутренний отступ с внешним margin-block. Проверьте компонент с длинным пояснением и увеличенным шрифтом.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.