CSS padding-inline-end Property

Description

The padding-inline-end CSS property controls the amount of padding added to the inline-end (right for left-to-right languages, left for right-to-left languages) edge of an element's content box. It is particularly useful for creating space between the content and the element's inline-end edge, which can be beneficial for layout and design purposes. This property is part of the CSS Logical Properties module, designed to make styling more adaptable to various writing modes and languages, ensuring consistent spacing regardless of text direction.

Initial value
0
Applies to
all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited
no
Computed value
as <length>
Animatable
a length
JavaScript syntax
object.style.paddingInlineEnd

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

padding-inline-end: <padding-top> 

Values

  • <padding-top> Specifies distance in px, pt, cm, etc. Negative values are not allowed.

Example

<div>
<p class="exampleText">Example text</p>
</div>
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  padding-inline-end: 20px;
  background-color: #c8c800;
}

Browser Support

The following table will show you the current browser support for the CSS padding-inline-end property.

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 2nd January 2024