Padding

Set the padding for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

p-0
padding: 0;
p-1
padding: .25rem;
p-2
padding: .5rem;
p-3
padding: .75rem;
p-4
padding: 1rem;
p-5
padding: 1.25rem;
p-6
padding: 1.5rem;
p-7
padding: 1.75rem;
p-8
padding: 2rem;
p-9
padding: 2.25rem;
p-10
padding: 2.5rem;
p-11
padding: 2.75rem;
p-12
padding: 3rem;
p-13
padding: 3.25rem;
p-14
padding: 3.5rem;
p-15
padding: 3.75rem;
p-16
padding: 4rem;
p-17
padding: 4.25rem;
p-18
padding: 4.5rem;
p-19
padding: 4.75rem;
p-20
padding: 5rem;
p-21
padding: 5.25rem;
p-22
padding: 5.5rem;
p-23
padding: 5.75rem;
p-24
padding: 6rem;
p-25
padding: 6.25rem;
p-26
padding: 6.5rem;
p-27
padding: 6.75rem;
p-28
padding: 7rem;
p-29
padding: 7.25rem;
p-30
padding: 7.5rem;
p-31
padding: 7.75rem;
p-32
padding: 8rem;
p-33
padding: 8.25rem;
p-34
padding: 8.5rem;
p-35
padding: 8.75rem;
p-36
padding: 9rem;
p-37
padding: 9.25rem;
p-38
padding: 9.5rem;
p-39
padding: 9.75rem;
p-40
padding: 10rem;
p-41
padding: 10.25rem;
p-42
padding: 10.5rem;
p-43
padding: 10.75rem;
p-44
padding: 11rem;
p-45
padding: 11.25rem;
p-46
padding: 11.5rem;
p-47
padding: 11.75rem;
p-48
padding: 12rem;
p-49
padding: 12.25rem;
p-50
padding: 12.5rem;
p-51
padding: 12.75rem;
p-52
padding: 13rem;
p-53
padding: 13.25rem;
p-54
padding: 13.5rem;
p-55
padding: 13.75rem;
p-56
padding: 14rem;
p-57
padding: 14.25rem;
p-58
padding: 14.5rem;
p-59
padding: 14.75rem;
p-60
padding: 15rem;
p-61
padding: 15.25rem;
p-62
padding: 15.5rem;
p-63
padding: 15.75rem;
p-64
padding: 16rem;
p-65
padding: 16.25rem;
p-66
padding: 16.5rem;
p-67
padding: 16.75rem;
p-68
padding: 17rem;
p-69
padding: 17.25rem;
p-70
padding: 17.5rem;
p-71
padding: 17.75rem;
p-72
padding: 18rem;
p-73
padding: 18.25rem;
p-74
padding: 18.5rem;
p-75
padding: 18.75rem;
p-76
padding: 19rem;
p-77
padding: 19.25rem;
p-78
padding: 19.5rem;
p-79
padding: 19.75rem;
p-80
padding: 20rem;
p-81
padding: 20.25rem;
p-82
padding: 20.5rem;
p-83
padding: 20.75rem;
p-84
padding: 21rem;
p-85
padding: 21.25rem;
p-86
padding: 21.5rem;
p-87
padding: 21.75rem;
p-88
padding: 22rem;
p-89
padding: 22.25rem;
p-90
padding: 22.5rem;
p-91
padding: 22.75rem;
p-92
padding: 23rem;
p-93
padding: 23.25rem;
p-94
padding: 23.5rem;
p-95
padding: 23.75rem;
p-96
padding: 24rem;
p-97
padding: 24.25rem;
p-98
padding: 24.5rem;
p-99
padding: 24.75rem;
p-100
padding: 25rem;
p-auto
padding: auto;
p-px
padding: 1px;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:p-(value)
Small≥640px
md:p-(value)
Medium≥768px
lg:p-(value)
Large≥1024px
xxl:p-(value)
Extra Large≥1536px

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.

Syntax:h:p-(value)

Negative Values

Use negative variants to apply negative padding values.

Use the -- syntax to apply negative numeric values.

Syntax:p--(value)