CSS padding-block Property

Description

The padding-block CSS property is used to define the padding space within the block-axis of an element. The block-axis is typically the vertical axis in most writing modes, such as top-to-bottom text flow. By setting padding-block, you can specify the amount of space between the content of an element and its inner edges along the block-axis. This property is particularly useful for creating spacing and layout adjustments in vertical writing modes or when working with elements that have dynamic content heights, helping maintain consistent spacing around content within a container. Individual properties are: padding-block-end and padding-block-start

Initial value: See individual properties
Applies to: all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited: no
Computed value: all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Animatable: a length
JavaScript syntax: object.style.paddingBlock

Interactive Demo

padding-block: 30px 50px;
writing-mode: horizontal-tb;

padding-block: 20px 40px;
writing-mode: vertical-rl;
height: 250px;

padding-block: 10% 20%;
writing-mode: horizontal-tb;

padding-block: 2em 4em;
writing-mode: vertical-lr;
height: 250px;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

padding-block: <padding-top>{1,2}

Values

<padding-top>{1,2}Specifies padding-block in px, pt, cm, etc. Negative values are not allowed.

Example

HTML

<div>

  <p class="exampleText">Example text</p>

</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}

Result

Editor