padding-inline-end

Definition

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.

Examples

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;
}

Values

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