CSS padding-inline Property

Sets the logical start and end padding of an element based on its writing mode, direction, and text orientation.

selector { padding-inline: value; }
<length> Specifies a fixed distance using units like px, em, or rem.
<percentage> Defines padding as a percentage of the width of the containing block.
initial Sets the property to its default value of 0.
inherit Inherits the padding value from the parent element.
unset Resets the property to its natural value, which is either inherited or the initial value.

Code Examples

A basic example showing how to apply equal logical padding to the start and end of an element.

<style>
.info-box {
  border: 2px solid #333333;
  background-color: #e0e0e0;
  padding-inline: 40px;
  display: inline-block;
}
</style>
<div class="info-box">
  This box has 40px of logical inline padding on both sides.
</div>

An advanced example using JavaScript to toggle text direction and update logical padding values dynamically.

<style>
.container {
  border: 1px solid #000000;
  padding: 10px;
}
.dynamic-card {
  background-color: #ffcc00;
  padding-inline: 10px 50px;
  transition: padding-inline 0.3s ease;
}
</style>
<div id="app" class="container" dir="ltr">
  <div id="card" class="dynamic-card">
    Observe how the spacing behaves when the direction flips.
  </div>
  <button onclick="toggleDirection()" style="margin-top: 20px;">Toggle RTL/LTR</button>
</div>
<script>
function toggleDirection() {
  const app = document.getElementById("app");
  const card = document.getElementById("card");
  app.dir = app.dir === "ltr" ? "rtl" : "ltr";
  if (app.dir === "rtl") {
    card.style.paddingInline = "50px 10px";
    card.style.backgroundColor = "#00ccff";
  } else {
    card.style.paddingInline = "10px 50px";
    card.style.backgroundColor = "#ffcc00";
  }
}
</script>

Pro Tip

You can use the calc() function within padding-inline to create dynamic spacing that responds to viewport sizes. For example: padding-inline: calc(10px + 2vw);. This keeps your content centered and well-spaced on everything from a small smartphone to a giant 4K monitor without needing a dozen media queries.

Deep Dive

Think of padding-inline as the space between a room's side walls and the furniture inside. In a standard English layout, it acts exactly like padding-left and padding-right. However, if you switch the language to Arabic or Hebrew, which read right-to-left, the start and end positions flip automatically. This property is part of the CSS Logical Properties module, designed to make your layouts smarter and globally compatible. Instead of hard-coding physical sides, you are defining space relative to the flow of the content. If the text flows vertically, padding-inline will actually affect the top and bottom of the element because those become the sides relative to the text line.

Best Practices

Use padding-inline when you want your layout to be bulletproof for international audiences. It prevents you from having to write extra CSS overrides for different directions. Use relative units like rem or em so the internal spacing grows or shrinks along with your typography. It is cleaner to use this shorthand rather than defining padding-inline-start and padding-inline-end separately unless you specifically need different values for each side.

Common Pitfalls

A common mistake is assuming padding-inline always means left and right. It only means left and right in horizontal writing modes. If you change the writing-mode to vertical-rl, padding-inline will control the top and bottom spacing. Also, keep in mind that if you provide one value, it applies to both sides; if you provide two, the first is the start and the second is the end.

Accessibility

Ensure that your inline padding is sufficient to keep text from touching the edges of its container, which helps with readability for users with visual impairments. Using logical properties is an accessibility win because it ensures your design remains functional and legible regardless of the user's native reading direction.

Dev Data Table: padding-inline property

default 0
animatable yes
inherited no
experimental no
year_intro 2017
year_standard 2021
js_syntax_1 element.style.paddingInline = "20px 40px";
js_syntax_2 element.style.setProperty("padding-inline", "20px 40px");
js_note When using JavaScript to manipulate logical properties, use camelCase for the style object property name.
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...