CSS padding-inline Property


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
Computed value
See individual properties
a length
JavaScript syntax

Interactive Demo

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


padding-inline: <padding-top>{1,2}  


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


<p class="exampleText">Example text</p>
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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024