CSS padding-inline Property

Description

The padding-inline CSS property is used to control the inline (horizontal) padding of an element within its containing block. It is particularly useful for managing spacing on inline-level elements like text or inline-block elements. By setting padding-inline, you can add space to the left and right of the content within the element, effectively increasing or decreasing its width without affecting its overall box dimensions. This property is especially valuable for fine-tuning the layout and alignment of inline elements within a design, helping to create visually pleasing and well-structured content. Individual propeties are: padding-inline-end and padding-inline-start.

Initial value
See individual properties
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
See individual properties
Animatable
a length
JavaScript syntax
object.style.paddingInline

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: <padding-top>{1,2}  

Values

  • <padding-top>{1,2} 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-rl;
  padding-inline: 20px 40px;
  background-color: #c8c800;
}

Browser Support

The following table will show you the current browser support for the CSS padding-inline 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