padding-block-start CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The padding-block-start CSS property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

Try it

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

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

padding-block-start: 5em;
writing-mode: horizontal-tb;

padding-block-start: 5em;
writing-mode: vertical-lr;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
  unicode-bidi: bidi-override;
}

Syntax

css
/* <length> values */
padding-block-start: 10px; /* An absolute length */
padding-block-start: 1em; /* A length relative to the text size */

/* <percentage> value */
padding-block-start: 5%; /* A padding relative to the block container's width */

/* Global values */
padding-block-start: inherit;
padding-block-start: initial;
padding-block-start: revert;
padding-block-start: revert-layer;
padding-block-start: unset;

Values

The size of the padding as a fixed value. Must be nonnegative.

The size of the padding as a percentage, relative to the inline-size (width in a horizontal language) of the containing block. Must be nonnegative.

Description

The padding-block-start property takes the same values as physical padding properties such as padding-top. However, it can be equivalent to padding-top, padding-bottom, padding-left, or padding-right depending on the values set for writing-mode, direction, and text-orientation.

It relates to padding-block-end, padding-inline-start, and padding-inline-end, which define the other padding values of the element.

Formal definition

Initial valueApplies toInheritedPercentagesComputed value Animation type

all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

logical-width of containing block

as <length>

a length

Formal syntax

padding-block-start =
<'padding-top'>

<padding-top> =
<length-percentage [0,∞]>

<length-percentage> =
<length> |
<percentage>
This syntax reflects the latest standard as per CSS Box Model Module Level 4, CSS Logical Properties and Values Module Level 1, CSS Values and Units Module Level 4. Not all browsers may have implemented every part. See Browser compatibility for support information.

Examples

Setting block start padding for vertical text

HTML

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

CSS

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

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