Padding
Set the padding for an element.
Widely available
This feature is well established and works across many devices and browser versions.
Usage
6
<div> <div class="p-8"> <p class="p-6 bg-indigo c-white">6</p> </div></div>Padding Top
Control an element's top padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pt-6 bg-indigo c-white">6</p> </div></div>Padding Right
Control an element's right padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pr-6 bg-indigo c-white">6</p> </div></div>Padding Bottom
Control an element's bottom padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pb-6 bg-indigo c-white">6</p> </div></div>Padding Left
Control an element's left padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pl-6 bg-indigo c-white">6</p> </div></div>Padding Block End
Control an element's logical block end padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pbe-6 bg-indigo c-white">6</p> </div></div>Padding Block Start
Control an element's logical block start padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pbs-6 bg-indigo c-white">6</p> </div></div>Padding Inline End
Control an element's logical inline end padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pie-6 bg-indigo c-white">6</p> </div></div>Padding Inline Start
Control an element's logical inline start padding.
Widely available
This feature is well established and works across many devices and browser versions.
6
<div> <div class="p-8"> <p class="pis-6 bg-indigo c-white">6</p> </div></div>Padding Inline
Control an element's horizontal padding.
6
<div> <div class="p-8"> <p class="px-6 bg-indigo c-white">6</p> </div></div>Padding Block
Control an element's vertical padding.
6
<div> <div class="p-8"> <p class="py-6 bg-indigo c-white">6</p> </div></div>Responsiveness
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
sm:p-*md:p-*lg:p-*xxl:p-*Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
h:p-*Negative Values
Use negative variants to apply negative padding values.
Use the -- syntax to apply negative numeric values.
p--*