Padding Inline

Set an element's horizontal padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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