CSS padding-block-end Property

Description

The padding-block-end CSS property is used to define the padding space at the end of a block-level element, which is typically the bottom space when considering the block's writing mode (horizontal or vertical). This property allows web developers to control the spacing between the content and the boundary of the element's block direction. It is particularly useful in responsive design and layout control, enabling precise adjustments to the element's visual appearance and spacing within the layout flow.

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.paddingBlockEnd

Interactive Demo

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

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

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

padding-block-end: 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-end: <padding-top>

Values

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

Result

Editor