CSS padding-inline Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

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

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

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

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

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

HTML

<div>

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

</div>

CSS

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

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

Result

Editor