CSS padding-block-start Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The padding-block-start CSS property is used to specify the padding space on the block-start side of an element, which is the top side in a horizontal writing mode or the leading side in a vertical writing mode. This property is particularly useful for controlling the spacing between the content of an element and its block-start edge, such as the top of a container in vertical writing modes or the left side in horizontal writing modes. By adjusting the padding-block-start value, you can create spacing and alignment within your layout to achieve the desired design and improve readability.

Initial value: 0
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: as <length>
Animatable: a length
JavaScript syntax: object.style.paddingBlockStart

Interactive Demo

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

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

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

padding-block-start: 2em;
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-start: <padding-top>

Values

<padding-top> Specifies padding-block-start 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-lr;
  padding-block-start: 20px;
  background-color: #c8c800;
}

Result

Editor