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

Syntax

padding-inline-end: <padding-top>

Values

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

Example

HTML

<div>

  <p class="exampleText">Example text</p>

</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

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

Result