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;
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
.
Initial value | 0 |
---|---|
Applies to | all elements |
Inherited | no |
Percentages | logical-width of containing block |
Computed value | as <length>
|
Animation type | discrete |
<'padding-left'>{1,2}
<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; }
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'padding-inline' in that specification. | Editor's Draft | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
padding-inline |
69
|
79
|
66 | No | 56 | No |
Mobile | ||||||
---|---|---|---|---|---|---|
padding-inline |
69 | 69
|
66 | 48 | No | 10.0 |
padding-top
, padding-right
, padding-bottom
, and padding-left
writing-mode
, direction
, text-orientation
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline