CSS padding-block-end Property
Description
The padding-block-end property sets the padding on the "end" side of the block axis for an element, using logical (writing-mode-aware) direction rather than a fixed physical side. That means what counts as the block end depends on the element's block flow: in a horizontal-tb writing mode the block axis runs top-to-bottom so the block end corresponds to the bottom edge, while in vertical writing modes the block axis runs in a different direction and the end side can correspond to a physical left or right edge. See writing-mode and direction for how those axes are determined.
In layout terms, padding-block-end adds inner space between the element's border (or edge if border is absent) and its content on that end side. It participates in painting (backgrounds extend underneath padding) and in hit-testing and interactive areas, and it occupies layout space unless the used box-sizing model alters sizing behavior. For example, the element's total outer size in a normal flow is affected by its padding unless modified by box-sizing. Percentages used with this logical padding resolve the same way as other padding percentages — they follow the CSS rules for percentage resolution (not the block-axis length) — so they can behave counterintuitively if you expect them to reference the block-size.
Practical use favors logical properties like padding-block-end when creating stylesheets that must adapt to different writing modes, languages, or layout reflows: you can change the overall flow direction and let the logical padding map to the correct physical side automatically. It is commonly set alongside its counterpart padding-block (shorthand for both block-start and block-end) or the universal shorthand padding. Logical padding works with transitions and animations just like physical padding, and because it does not inherit by default, explicit values are typically applied to the element that requires the spacing.
Definition
- 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
Syntax
padding-block-end: <padding-top>
Values
- <padding-top> Specifies padding-block-end in px, pt, cm, etc. Negative values are not allowed.
Example
Browser Support
The following information will show you the current browser support for the CSS padding-block-end property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
