1. css
  2. /properties
  3. /padding-inline-end



The padding-inline-end CSS property sets the padding area on the "end" side of an element in the inline dimension, which depends on the writing mode and direction. In left-to-right languages like English, the end side corresponds to the right side of the element, whereas, in right-to-left languages like Arabic, it corresponds to the left side.


Add 20px padding to the inline end of a paragraph

p {
  padding-inline-end: 20px;

Add 2% padding to the inline end of a div:

div {
  padding-inline-end: 2%;

Add 1em padding to the inline end of an unordered list

ul {
  padding-inline-end: 1em;


lengthSpecifies a fixed padding in length units (e.g., px, em, %).
initialSets the padding-inline-end to its default value (0).
inheritInherits the padding-inline-end value from its parent element.
unsetResets the property to its inherited value if it inherits.

Best Practices

  • Use padding-inline-end instead of padding-right or padding-left when working with multi-language websites to ensure proper padding application in different writing modes and directions.
  • Use relative units like percentages or ems for responsive design, as they adjust based on the element's parent size or the user's font settings.
  • Be mindful of how padding affects an element's total width and height, which is calculated by adding the padding, border, and content size.
  • Test your design across different screen sizes, devices, and languages to ensure proper padding is applied and the layout remains visually appealing.
  • Combine padding-inline-end with other padding properties like padding-inline-start, padding-block-start, and padding-block-end to set padding for all sides of an element in a writing mode and direction-aware manner.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera