CSS padding-inline-start Property

This property defines the padding space at the beginning of an element based on its writing mode, direction, and text orientation.

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

Code Examples

A basic example showing how to apply a fixed 40px padding to the start edge of a div container.

<div style="padding-inline-start: 40px; background-color: #f0f0f0; border: 1px solid #333333;">
  This text has a 40px buffer at the start of the line.
</div>

An advanced example demonstrating how padding-inline-start automatically flips from left to right when the writing direction is toggled via JavaScript.

<div id="layoutBox" style="padding-inline-start: 50px; background-color: #e0f7fa; direction: ltr; padding: 10px;">
  <p>The padding is currently on the LEFT.</p>
  <button onclick="toggleDirection()">Switch to RTL</button>
</div>

<script>
function toggleDirection() {
  const box = document.getElementById("layoutBox");
  if (box.style.direction === "ltr") {
    box.style.direction = "rtl";
    box.querySelector("p").innerText = "The padding is now on the RIGHT.";
  } else {
    box.style.direction = "ltr";
    box.querySelector("p").innerText = "The padding is currently on the LEFT.";
  }
}
</script>

Pro Tip

You can combine this property with CSS variables to create a unified spacing system. By setting a variable like --main-gutter and applying it to padding-inline-start, you ensure your entire application maintains consistent, direction-aware margins with a single point of control.

Deep Dive

Think of padding-inline-start as a smart version of padding-left. In a standard English environment (Left-to-Right), this property adds space to the left of the element content. However, if the website is set to a Right-to-Left (RTL) language like Arabic, it automatically switches that space to the right side. It maps to the start edge of the inline axis, which is the direction text flows. Instead of hard-coding physical sides, you are defining logical space that respects the user's local language settings.

Best Practices

Always favor logical properties like padding-inline-start over physical ones like padding-left when building layouts for a global audience. It eliminates the need to write separate CSS overrides for RTL layouts, keeping your codebase smaller and easier to maintain. Use rem or em units for padding to ensure the spacing scales gracefully with the user's font size settings.

Common Pitfalls

A common mistake is assuming this property always maps to the left side. It only maps to the left in LTR writing modes. Also, remember that this is a logical property, so if you try to override it using padding-left later in the stylesheet, you might run into specificity or mapping conflicts where both might apply depending on the browser's implementation of the cascade.

Accessibility

Ensure that your inline padding is sufficient to prevent text from hitting the edge of containers, which can make reading difficult for users with visual or cognitive impairments. Avoid using excessive padding that might hide content or cause unwanted horizontal scrolling on mobile devices, as this creates a poor experience for users navigating via screen readers or touch interfaces.

Dev Data Table: padding-inline-start property

default 0
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2019
js_syntax_1 element.style.paddingInlineStart = "20px";
js_syntax_2 element.style.setProperty("padding-inline-start", "20px");
js_note When using JavaScript, the property name is camelCased as paddingInlineStart to interact with the style object.
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 }
results render here...