CSS padding-block-start Property

Sets the padding space at the logical start of the block axis of an element, adapting to the writing mode.

selector { padding-block-start: value; }

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

Code Examples

A basic example showing how to apply 40px of padding to the top of an element in a standard horizontal layout.

<div style="padding-block-start: 40px; background: #eeeeee; border: 1px solid #333333;">
  <p>This box has a 40px buffer at the logical start of the block axis.</p>
</div>

Advanced example using JavaScript to toggle writing modes, demonstrating how padding-block-start remains at the start of the text flow even when orientation changes.

<div id="container" style="padding-block-start: 50px; background: #222222; color: #ffffff; writing-mode: horizontal-tb; transition: padding 0.5s;">
  <p id="status">Writing Mode: horizontal-tb</p>
  <button onclick="toggleDirection()">Switch Writing Mode</button>
</div>

<script>
function toggleDirection() {
  const el = document.getElementById("container");
  const stat = document.getElementById("status");
  if (el.style.writingMode === "horizontal-tb") {
    el.style.writingMode = "vertical-rl";
  } else {
    el.style.writingMode = "horizontal-tb";
  }
  stat.innerText = "Writing Mode: " + el.style.writingMode;
}
</script>

Pro Tip

Think of the 'block-start' as the 'head' of a bed. No matter where you move the bed in a room or how you rotate it, the head is always where the pillows go. Using this property ensures your content always has that specific 'breathing room' at its beginning, regardless of the language settings.

Deep Dive

The padding-block-start property is a logical mapping that corresponds to a physical padding property based on the element's writing-mode, direction, and text-orientation. In a standard English layout (horizontal-tb), it acts exactly like padding-top. Think of it as the 'ceiling' of your content box. If you switch the writing mode to a vertical orientation, the 'start' of the block flow shifts to the right or left, and this property moves with it automatically. This prevents you from having to hard-code physical directions like 'top' when building layouts meant for a global audience.

Best Practices

Use logical properties like padding-block-start instead of padding-top if you are developing a site that supports multiple languages, especially those with different writing directions like Arabic or Chinese. It keeps your CSS clean and prevents the need for directional overrides. Always pair it with other logical properties like padding-block-end and padding-inline to maintain a consistent logical box model throughout your project.

Common Pitfalls

The most common mistake is confusing 'block' with 'inline'. Remember that 'block' refers to the direction elements stack (usually vertical), while 'inline' refers to the direction text flows (usually horizontal). Also, if you mix physical properties like padding-top with logical properties like padding-block-start, the cascade rules apply, and the last one declared will override the other if they target the same side.

Accessibility

Padding increases the clickable surface area of elements like buttons or links. Using padding-block-start ensures that the 'top' hit area remains consistent even when the text orientation changes, which is vital for users with limited motor precision. Ensure your padding values do not push critical content out of the viewport on small screens.

Dev Data Table: padding-block-start property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2017
year_standard	2019
js_syntax_1	element.style.paddingBlockStart = "20px";
js_syntax_2	element.style.setProperty("padding-block-start", "20px");
js_note	In JavaScript, the property is accessed via camelCase as paddingBlockStart.
browsers	{ "Chrome": 69, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 12.2, "Samsung Internet": 10.1, "Opera Mobile": 48 }