padding-block
A logical shorthand for setting both 'padding-block-start' and 'padding-block-end'. It's like setting 'padding-top' and 'padding-bottom' at the same time.
Quick example
.card {
/* Adds 1rem padding to the top AND bottom logically */
padding-block: 1rem;
}Quick facts
Initial value
See individual propertiesInherited
No
Applies to
all elements except internal table display types
Animation type
length
Values
padding-toppadding-block 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+