CSS padding-block-end Property

The padding-block-end property defines the logical block-end padding of an element, mapping to a physical padding edge based on the writing mode and direction.

selector { padding-block-end: value; }
<length> Specifies a fixed padding value using units like px, em, rem, or vh.
<percentage> Specifies padding as a percentage of the inline size of the containing block.

Code Examples

A basic example showing padding-block-end acting as bottom padding in a standard horizontal writing mode.

<div style="writing-mode: horizontal-tb; border: 2px solid #333333; padding-block-end: 50px;">
  <p>This container has 50px of padding at the end of the block axis (the bottom).</p>
</div>

An advanced example using JavaScript to toggle the writing mode, demonstrating how the padding-block-end property follows the text flow dynamically.

<div id="logicalBox" style="writing-mode: horizontal-tb; border: 2px solid #ff0000; padding-block-end: 40px; margin-block-end: 10px;">
  Watch the red padding area move as the writing mode changes.
</div>
<button onclick="toggleWritingMode()">Toggle Writing Mode</button>

<script>
function toggleWritingMode() {
  const box = document.getElementById("logicalBox");
  if (box.style.writingMode === "horizontal-tb") {
    box.style.writingMode = "vertical-rl";
  } else {
    box.style.writingMode = "horizontal-tb";
  }
}
</script>

Pro Tip

If you find yourself setting both the start and end of the block axis to the same value, you can use the shorthand padding-block property. For example, padding-block: 20px; is the same as setting both padding-block-start and padding-block-end to 20px, which keeps your stylesheets much leaner.

Deep Dive

Think of padding-block-end as the floor of your content container. In a standard English layout, which uses a horizontal top-to-bottom writing mode, this property behaves exactly like padding-bottom. However, if you switch to a vertical writing mode, such as those used in some East Asian languages, the floor moves to the left or right side. By using logical properties instead of physical ones, you ensure that your spacing remains consistent with the flow of the text, rather than being stuck to a specific physical side of the screen. It is part of the CSS Logical Properties and Values specification which helps developers create layouts that translate better across different languages and cultures.

Best Practices

Use padding-block-end whenever you are building layouts intended for an international audience. It is cleaner to use logical properties throughout your project rather than mixing them with physical properties like padding-bottom. This ensures that if the writing-mode of a parent element changes, the internal spacing of your components will automatically adjust to the new text flow without requiring manual CSS overrides for every direction.

Common Pitfalls

A frequent mistake is assuming padding-block-end always targets the bottom of an element. If your writing-mode is set to vertical-rl, the block-end is actually the left side. Also, keep in mind that percentage values for this property are calculated relative to the inline-size (usually width) of the parent container, not its height, which can be confusing for those used to how height-based percentages work in other contexts.

Accessibility

While padding is a visual tool, it plays a role in accessibility by ensuring text is not cramped against borders, making it easier for users with visual impairments or cognitive disabilities to distinguish between different content blocks. Logical properties specifically help by maintaining these visual relationships regardless of the user's preferred reading direction or language settings.

Dev Data Table: padding-block-end property

default 0
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.paddingBlockEnd = "20px";
js_syntax_2 element.style.setProperty("padding-block-end", "20px");
js_note When manipulating logical properties in JavaScript, use camelCase for the style object property or the full kebab-case string within the setProperty method.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 66, "Safari": 14.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 14.5, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...