CSS padding-block Property

A logical shorthand property that sets the padding for the start and end sides of an element in the block dimension, which corresponds to top and bottom in standard horizontal text.

selector { padding-block: <length> | <percentage> [ <length> | <percentage> ]; }

<length>	Specifies a fixed padding distance using units like px, em, or rem.
<percentage>	Defines padding as a percentage of the inline size of the containing block.

Code Examples

A basic example showing equal logical padding applied to the start and end of the block axis.

<div style="background-color: #f4f4f4; border: 2px solid #333; padding-block: 40px;">
  <p>This container has 40px of padding on the top and bottom in a standard horizontal layout.</p>
</div>

Advanced example using JavaScript to toggle the writing mode, demonstrating how logical padding-block stays relative to the text direction.

<div id="box" style="background-color: #e0f7fa; border: 2px solid #006064; padding-block: 20px 60px; writing-mode: horizontal-tb;">
  <p>Click the button to rotate the writing mode. Notice how the padding follows the text flow.</p>
</div>
<button onclick="toggleFlow()">Toggle Writing Mode</button>

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

Pro Tip

You can pair padding-block with the CSS clamp function to create fluid vertical spacing that grows or shrinks based on the viewport size. For example: padding-block: clamp(1rem, 5vh, 3rem);. This keeps your layout looking tight on mobile while letting it breathe on desktop displays without using a single media query.

Deep Dive

Think of padding-block as a flexible spacer that follows the flow of your content rather than the physical orientation of the screen. In a standard book, the block dimension is the direction you turn the pages. When you use this property, you are telling the browser to put space at the "beginning" and "end" of that flow. If you change the writing-mode from horizontal to vertical, the padding automatically swings around to stay at the head and foot of your text lines. It is like a smart gasket that knows which way the pressure is moving. It combines padding-block-start and padding-block-end into a single line. If you provide one value, it applies to both. If you provide two, the first value is the start and the second is the end.

Best Practices

Stick to logical properties like padding-block for all modern layouts. It makes your CSS more robust and future-proof. Instead of thinking "top" and "bottom", think "start" and "end" of the block flow. This approach is much cleaner than writing specific overrides for Right-to-Left (RTL) languages or vertical layouts. It ensures your UI spacing remains consistent regardless of the user's language settings.

Common Pitfalls

The biggest trap is forgetting that percentage values are relative to the width (inline-size) of the container, even when the padding is being applied vertically. Also, remember that this is a shorthand; if you only provide one value, it applies to both start and end. If you need different spacing for the top and bottom in a standard layout, you must provide two values. Older browsers may not support logical properties, so check your target audience before ditching physical properties entirely.

Accessibility

Ensure that adding padding does not push critical content out of the viewport or cause unintended overflow that makes text hard to read. Use relative units like "em" or "rem" to ensure spacing scales gracefully when users increase their browser's default font size. This keeps your layout accessible for users with visual impairments who rely on browser zooming.

Dev Data Table: padding-block property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2021
js_syntax_1	element.style.paddingBlock = "20px 40px";
js_syntax_2	element.style.setProperty("padding-block", "30px");
js_note	In JavaScript, use the camelCase property paddingBlock to manipulate this logical shorthand directly on the element's style object.
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 }