CSS padding-inline-end Property

Defines the logical padding at the end of an element's inline axis, adapting automatically to the document's direction or writing mode.

selector { padding-inline-end: value; }
<length> Specifies a fixed distance 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 padding is applied to the end of the inline axis in a standard LTR environment.

<div style="border: 2px solid #333333; padding-inline-end: 50px; display: inline-block;">
  This box has extra space at the end of the text line.
</div>

An advanced example demonstrating how logical properties automatically respond to changes in the document direction using JavaScript.

<div id="dynamicBox" style="border: 2px solid #0066ff; padding-inline-end: 40px; background-color: #f0f0f0;">
  Toggle the direction to see the padding shift sides.
</div>
<button onclick="toggleDir()">Toggle RTL/LTR</button>

<script>
function toggleDir() {
  const box = document.getElementById("dynamicBox");
  box.style.direction = box.style.direction === "rtl" ? "ltr" : "rtl";
  // Even though we only changed the direction, the padding shifts automatically
  box.style.paddingInlineEnd = "60px";
  console.log("Current padding color: ", "#0066ff");
}
</script>

Pro Tip

If you find yourself writing both padding-inline-start and padding-inline-end, you can use the shorthand padding-inline to set both at once. It keeps your code cleaner and easier to manage as your project grows.

Deep Dive

Standard physical properties like padding-right are 'dumb' because they stay on the right regardless of how the text flows. This property is part of the CSS Logical Properties module, which makes your layout 'smart' and context-aware. If your site uses a left-to-right (LTR) language like English, padding-inline-end acts exactly like padding-right. However, if the document direction is set to right-to-left (RTL) for languages like Arabic or Hebrew, the padding automatically shifts to the left side of the element. This ensures that the 'trailing' edge of your content always has the intended breathing room without you having to write separate CSS overrides for different languages.

Best Practices

Use this property when you are building layouts that might be translated into multiple languages. It is much more efficient than using padding-right and padding-left because it handles the flip for you. Always pair it with other logical properties like padding-inline-start to maintain consistent spacing across all writing modes and document directions.

Common Pitfalls

The most common mistake is mixing physical properties and logical properties on the same element, which can lead to unexpected spacing if they conflict. Also, remember that this only affects the 'inline' axis. In most web layouts, that is horizontal. If you change the writing-mode to something vertical, this property will suddenly affect the bottom or top of the element instead of the sides.

Accessibility

Proper internal spacing prevents text from touching the edges of its container, which is critical for readability. By using logical properties, you ensure that users reading in any language experience the same level of legibility and visual hierarchy, regardless of which way their text flows.

Dev Data Table: padding-inline-end property

default 0
animatable yes
inherited no
experimental no
year_intro 2014
year_standard 2021
js_syntax_1 element.style.paddingInlineEnd = "20px";
js_syntax_2 element.style.setProperty("padding-inline-end", "20px");
js_note In JavaScript, the property name uses camelCase for the style object but remains kebab-case when used with the setProperty method.
browsers { "Chrome": 87, "Edge": 87, "Firefox": 41, "Safari": 12.1, "Opera": 73, "Chrome Android": 87, "Safari on iOS": 12.2, "Samsung Internet": 14, "Opera Mobile": 62 }
results render here...