CSS padding-inline Property
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
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
<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;
}
Browser Support
The following table will show you the current browser support for the CSS padding-inline
property.
Desktop | |||||
87 | 87 | 66 | 73 | 14.1 |
Tablets / Mobile | |||||
87 | 66 | 62 | 14.5 | 14 | 87 |
Last updated by CSSPortal on: 2nd January 2024