Padding Top

Set an element's top padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:pt-(value)
Small≥640px
md:pt-(value)
Medium≥768px
lg:pt-(value)
Large≥1024px
xxl:pt-(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:pt-(value)