1. css
  2. /properties
  3. /padding-block-start

padding-block-start

Definition

The padding-block-start CSS property is used to set the amount of padding between the content of a block-level element and the top edge of its containing block. The padding-block-start property works with the padding-inline-start, padding-block-end, and padding-inline-end properties to allow for the setting of padding on all four sides of a block-level element.

Examples

Add a padding of 20 pixels to the top of a div element:

div {
  padding-block-start: 20px;
}

Add a padding of 1.5 em to the top of a section element:

section {
  padding-block-start: 1.5em;
}

Add a percentage-based padding to the top of a header element:

header {
  padding-block-start: 10%;
}

Values

ValueDescription
lengthSets the padding in absolute units, such as pixels (px), points (pt), or centimeters (cm).
%Sets the padding as a percentage of the containing block's width.
inheritInherits the padding value from the element's parent.
initialSets the padding to its default value.
unsetSets the padding to its inherited value if it exists, or its initial value if it does not.

Best Practices

  • Use padding-block-start to set the padding between the top edge of a block-level element and its content.
  • Use padding-block-start in combination with padding-inline-start, padding-block-end, and padding-inline-end to set padding on all four sides of a block-level element.
  • When possible, use length values (such as pixels) for the padding-block-start property to ensure consistent and predictable padding.
  • Avoid using percentage-based values for padding-block-start if the containing block's width may change, as this can result in inconsistent padding.
  • Use a fallback or alternative method (such as padding-top) if padding-block-start is not supported in older browsers.
  • Consider using the shorthand padding-block property to set padding on all four sides of a block-level element at once.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesNoYesNo