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

padding-inline-end: 5%;
writing-mode: horizontal-tb;

padding-inline-end: 15px;
writing-mode: vertical-rl;
height: 250px;

padding-inline-end: 5%;
writing-mode: horizontal-tb;
direction: rtl;
unicode-bidi:bidi-override;

padding-inline-end: 2em;
writing-mode: vertical-lr;
height: 250px;

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
87	87	66	73	14.1

Tablets / Mobile
87	66	62	14.5	14	87

Last updated by CSSPortal on: 2nd January 2024