Inset

Set the placement of positioned elements.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to position in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:i--(value)