The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

/* <length> values */
padding-inline: 10px 20px;  /* An absolute length */
padding-inline: 1em 2em;   /* relative to the text size */
padding-inline: 10px; /* sets both start and end values */

/* <percentage> values */
padding-inline: 5% 2%; /* relative to the nearest block container's width */

/* Global values */
padding-inline: inherit;
padding-inline: initial;
padding-inline: unset;

Constituent properties

This property is a shorthand for the following CSS properties:



The padding-inline property takes the same values as the padding-left property.


Values for this property correspond to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orientation.

Formal definition

Initial value0
Applies toall elements
Percentageslogical-width of containing block
Computed valueas <length>
Animation typediscrete

Formal syntax



Setting inline padding for vertical text


  <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;



Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'padding-inline' in that specification.
Editor's Draft Initial definition

Browser compatibility

BCD tables only load in the browser

See also