CSS padding-block-start Property

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

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

<div>
<p class="exampleText">Example text</p>
</div>
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

Browser Support

The following table will show you the current browser support for the CSS padding-block-start property.

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 2nd January 2024