padding-inline
A logical shorthand for setting both 'padding-inline-start' and 'padding-inline-end'. It's like setting 'padding-left' and 'padding-right' at the same time.
Quick example
.button {
/* Adds 1.5rem padding to both sides logically */
padding-inline: 1.5rem;
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
all elements except internal table display types
Animation type
length
Values
padding-toppadding-inline Browser Support
Widely availableSince 202195% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Safe to use without fallbacks.
87+
66+
14.1+
87+