CSS propertyBox model

padding-inline

Sets the inner space at the start and end of a line. The logical version of padding-left and padding-right, aware of writing direction.

Initial value: 0
Inherited: No
Animatable: yes, as a length or percentage
Applies to: all elements except internal table elements (other than cells)
JavaScript: element.style.paddingInline = "16px"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.search {
  position: relative;
  display: block;
}

.search .icon {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  translate: 0 -50%;
}

.search input {
  inline-size: 100%;
  padding-block: 10px;
  padding-inline: 40px 12px;
}

Example HTML

<style>
  .search + .search { margin-top: 10px; }
  .search input { border: 1px solid #3f3f46; border-radius: 10px; background: #18181b; color: inherit; font: inherit; }
  .search .icon { width: 14px; height: 14px; border: 2px solid #a1a1aa; border-radius: 50%; }
</style>
<label class="search">
  <span class="icon" aria-hidden="true"></span>
  <input type="text" placeholder="Search the docs">
</label>
<label class="search" dir="rtl">
  <span class="icon" aria-hidden="true"></span>
  <input type="text" placeholder="Search the docs">
</label>

Preview

The second field has dir="rtl". The icon and the space reserved for it moved to the right, even though the CSS is the same.

Definition and usage

The padding-inline property is shorthand for padding-inline-start and padding-inline-end, the inner spacing at the start and end of the inline axis. In horizontal, left-to-right text that’s the left and right sides, so padding-inline: 16px gives the same result as 16px of padding-left and padding-right.

The benefit shows up when the writing direction changes. With dir="rtl" the line starts on the right, and in vertical writing at the top, and the logical spacing follows automatically. The direction comes from the element’s own writing-mode and direction, and both properties are inherited, so it’s usually enough to set them on an ancestor.

The padding-block shorthand does the same on the block axis, meaning top and bottom in ordinary text. Its components are padding-block-start and padding-block-end. One value lands on both ends, two mean start and end.

As with plain padding, values can’t be negative. Percentages are calculated against the inline size of the containing block (in horizontal text, its width), in padding-block too.

Syntax

padding-inline: <start> <end>?;
padding-block: <start> <end>?;

Values

24px
<length>
One value: 24px at the start and end of the line. The stripes are the padding, and the purple area is the content.
8px 48px
start end
The start gets 8px, the end 48px. In left-to-right text, the wider band is on the right.
dir="rtl"
right-to-left text
The same 8px 48px declaration inside a container with dir="rtl". The end of the line is now on the left, so that’s where the wider spacing goes.
vertical-rl
vertical writing mode
A vertically written element has an inline axis running top to bottom, so padding-inline adds spacing above and below it.
padding-block: 16px
block axis
The shorthand for the block axis. In horizontal text it adds 16px above and below the content.

Value	Type	Description
24px	<length>	One value: 24px at the start and end of the line. The stripes are the padding, and the purple area is the content.
8px 48px	start end	The start gets 8px, the end 48px. In left-to-right text, the wider band is on the right.
dir="rtl"	right-to-left text	The same `8px 48px` declaration inside a container with `dir="rtl"`. The end of the line is now on the left, so that’s where the wider spacing goes.
vertical-rl	vertical writing mode	A vertically written element has an inline axis running top to bottom, so `padding-inline` adds spacing above and below it.
padding-block: 16px	block axis	The shorthand for the block axis. In horizontal text it adds 16px above and below the content.

Values in practice

24px

One value: 24px at the start and end of the line. The stripes are the padding, and the purple area is the content.

.demo { padding-inline: 24px; }

8px 48px

The start gets 8px, the end 48px. In left-to-right text, the wider band is on the right.

.demo { padding-inline: 8px 48px; }

dir="rtl"

The same 8px 48px declaration inside a container with dir="rtl". The end of the line is now on the left, so that’s where the wider spacing goes.

.demo { padding-inline: 8px 48px; }

vertical-rl

A vertically written element has an inline axis running top to bottom, so padding-inline adds spacing above and below it.

.demo { writing-mode: vertical-rl; padding-inline: 24px; }

padding-block: 16px

The shorthand for the block axis. In horizontal text it adds 16px above and below the content.

.demo { padding-block: 16px; }

Browser support

Widely available · since 2021

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Buttons look proportional with padding-block: 0.5em; padding-inline: 1em. Spacing in em grows along with the font size.
Make room for an icon at the start of a field with padding-inline-start, and position the icon itself with inset-inline-start. In a right-to-left layout, both jump to the other side automatically.
In padding-block, a percentage is still calculated against the width of the containing block, not its height. For an element’s proportions, aspect-ratio works better.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course