Clear Search

Layout

inset

Utilities for setting inset offsets (top, right, bottom, left).

Quick reference

Inset

Class Styles

Class	Styles
`inset-auto`	`inset: auto;`
`inset-px`	`inset: 1px;`
`inset-full`	`inset: 100%;`
`-inset-px`	`inset: -1px;`
`-inset-full`	`inset: -100%;`
`inset-<number>`	`inset: calc(var(--spacing) * <number>);/* 0.25rem */`
`inset-4`	`inset: calc(var(--spacing) * 4);`
`inset-<fraction>`	`inset: <percentage>;`
`inset-1/2`	`inset: 50%;`
`inset-[<value>]`	`inset: <value>;`
`inset-[1rem]`	`inset: 1rem;`
`inset-(<custom-property>)`	`inset: var(<custom-property>);`
`inset-(--my-length)`	`inset: var(--my-length);`
`inset-(length:<custom-property>)`	`inset: var(<custom-property>);`
`inset-(length:--my-length)`	`inset: var(--my-length);`
`-inset-<number>`	`inset: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-inset-4`	`inset: calc(var(--spacing) * -4);`
`-inset-<fraction>`	`inset: calc(<percentage> * -1);`
`-inset-1/2`	`inset: calc(50% * -1);`

inset-auto

inset: auto;

inset-px

inset: 1px;

inset-full

inset: 100%;

-inset-px

inset: -1px;

-inset-full

inset: -100%;

inset-<number>

inset: calc(var(--spacing) * <number>);/* 0.25rem */

inset-4

inset: calc(var(--spacing) * 4);

inset-<fraction>

inset: <percentage>;

inset-1/2

inset: 50%;

inset-[<value>]

inset: <value>;

inset-[1rem]

inset: 1rem;

inset-(<custom-property>)

inset: var(<custom-property>);

inset-(--my-length)

inset: var(--my-length);

inset-(length:<custom-property>)

inset: var(<custom-property>);

inset-(length:--my-length)

inset: var(--my-length);

-inset-<number>

inset: calc(var(--spacing) * -<number>);/* 0.25rem */

-inset-4

inset: calc(var(--spacing) * -4);

-inset-<fraction>

inset: calc(<percentage> * -1);

-inset-1/2

inset: calc(50% * -1);

Inset End

Class Styles

Class	Styles
`end-auto`	`inset-inline-end: auto;`
`end-px`	`inset-inline-end: 1px;`
`end-full`	`inset-inline-end: 100%;`
`-end-px`	`inset-inline-end: -1px;`
`-end-full`	`inset-inline-end: -100%;`
`end-<number>`	`inset-inline-end: calc(var(--spacing) * <number>);/* 0.25rem */`
`end-4`	`inset-inline-end: calc(var(--spacing) * 4);`
`end-<fraction>`	`inset-inline-end: <percentage>;`
`end-1/2`	`inset-inline-end: 50%;`
`end-[<value>]`	`inset-inline-end: <value>;`
`end-[1rem]`	`inset-inline-end: 1rem;`
`end-(<custom-property>)`	`inset-inline-end: var(<custom-property>);`
`end-(--my-length)`	`inset-inline-end: var(--my-length);`
`end-(length:<custom-property>)`	`inset-inline-end: var(<custom-property>);`
`end-(length:--my-length)`	`inset-inline-end: var(--my-length);`
`-end-<number>`	`inset-inline-end: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-end-4`	`inset-inline-end: calc(var(--spacing) * -4);`
`-end-<fraction>`	`inset-inline-end: calc(<percentage> * -1);`
`-end-1/2`	`inset-inline-end: calc(50% * -1);`

end-auto

inset-inline-end: auto;

end-px

inset-inline-end: 1px;

end-full

inset-inline-end: 100%;

-end-px

inset-inline-end: -1px;

-end-full

inset-inline-end: -100%;

end-<number>

inset-inline-end: calc(var(--spacing) * <number>);/* 0.25rem */

end-4

inset-inline-end: calc(var(--spacing) * 4);

end-<fraction>

inset-inline-end: <percentage>;

end-1/2

inset-inline-end: 50%;

end-[<value>]

inset-inline-end: <value>;

end-[1rem]

inset-inline-end: 1rem;

end-(<custom-property>)

inset-inline-end: var(<custom-property>);

end-(--my-length)

inset-inline-end: var(--my-length);

end-(length:<custom-property>)

inset-inline-end: var(<custom-property>);

end-(length:--my-length)

inset-inline-end: var(--my-length);

-end-<number>

inset-inline-end: calc(var(--spacing) * -<number>);/* 0.25rem */

-end-4

inset-inline-end: calc(var(--spacing) * -4);

-end-<fraction>

inset-inline-end: calc(<percentage> * -1);

-end-1/2

inset-inline-end: calc(50% * -1);

Inset Start

Class Styles

Class	Styles
`start-auto`	`inset-inline-start: auto;`
`start-px`	`inset-inline-start: 1px;`
`start-full`	`inset-inline-start: 100%;`
`-start-px`	`inset-inline-start: -1px;`
`-start-full`	`inset-inline-start: -100%;`
`start-<number>`	`inset-inline-start: calc(var(--spacing) * <number>);/* 0.25rem */`
`start-4`	`inset-inline-start: calc(var(--spacing) * 4);`
`start-<fraction>`	`inset-inline-start: <percentage>;`
`start-1/2`	`inset-inline-start: 50%;`
`start-[<value>]`	`inset-inline-start: <value>;`
`start-[1rem]`	`inset-inline-start: 1rem;`
`start-(<custom-property>)`	`inset-inline-start: var(<custom-property>);`
`start-(--my-length)`	`inset-inline-start: var(--my-length);`
`start-(length:<custom-property>)`	`inset-inline-start: var(<custom-property>);`
`start-(length:--my-length)`	`inset-inline-start: var(--my-length);`
`-start-<number>`	`inset-inline-start: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-start-4`	`inset-inline-start: calc(var(--spacing) * -4);`
`-start-<fraction>`	`inset-inline-start: calc(<percentage> * -1);`
`-start-1/2`	`inset-inline-start: calc(50% * -1);`

start-auto

inset-inline-start: auto;

start-px

inset-inline-start: 1px;

start-full

inset-inline-start: 100%;

-start-px

inset-inline-start: -1px;

-start-full

inset-inline-start: -100%;

start-<number>

inset-inline-start: calc(var(--spacing) * <number>);/* 0.25rem */

start-4

inset-inline-start: calc(var(--spacing) * 4);

start-<fraction>

inset-inline-start: <percentage>;

start-1/2

inset-inline-start: 50%;

start-[<value>]

inset-inline-start: <value>;

start-[1rem]

inset-inline-start: 1rem;

start-(<custom-property>)

inset-inline-start: var(<custom-property>);

start-(--my-length)

inset-inline-start: var(--my-length);

start-(length:<custom-property>)

inset-inline-start: var(<custom-property>);

start-(length:--my-length)

inset-inline-start: var(--my-length);

-start-<number>

inset-inline-start: calc(var(--spacing) * -<number>);/* 0.25rem */

-start-4

inset-inline-start: calc(var(--spacing) * -4);

-start-<fraction>

inset-inline-start: calc(<percentage> * -1);

-start-1/2

inset-inline-start: calc(50% * -1);

Inset X

Class Styles

Class	Styles
`inset-x-auto`	`inset-inline: auto;`
`inset-x-px`	`inset-inline: 1px;`
`inset-x-full`	`inset-inline: 100%;`
`-inset-x-px`	`inset-inline: -1px;`
`-inset-x-full`	`inset-inline: -100%;`
`inset-x-<number>`	`inset-inline: calc(var(--spacing) * <number>);/* 0.25rem */`
`inset-x-4`	`inset-inline: calc(var(--spacing) * 4);`
`inset-x-<fraction>`	`inset-inline: <percentage>;`
`inset-x-1/2`	`inset-inline: 50%;`
`inset-x-[<value>]`	`inset-inline: <value>;`
`inset-x-[1rem]`	`inset-inline: 1rem;`
`inset-x-(<custom-property>)`	`inset-inline: var(<custom-property>);`
`inset-x-(--my-length)`	`inset-inline: var(--my-length);`
`inset-x-(length:<custom-property>)`	`inset-inline: var(<custom-property>);`
`inset-x-(length:--my-length)`	`inset-inline: var(--my-length);`
`-inset-x-<number>`	`inset-inline: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-inset-x-4`	`inset-inline: calc(var(--spacing) * -4);`
`-inset-x-<fraction>`	`inset-inline: calc(<percentage> * -1);`
`-inset-x-1/2`	`inset-inline: calc(50% * -1);`

inset-x-auto

inset-inline: auto;

inset-x-px

inset-inline: 1px;

inset-x-full

inset-inline: 100%;

-inset-x-px

inset-inline: -1px;

-inset-x-full

inset-inline: -100%;

inset-x-<number>

inset-inline: calc(var(--spacing) * <number>);/* 0.25rem */

inset-x-4

inset-inline: calc(var(--spacing) * 4);

inset-x-<fraction>

inset-inline: <percentage>;

inset-x-1/2

inset-inline: 50%;

inset-x-[<value>]

inset-inline: <value>;

inset-x-[1rem]

inset-inline: 1rem;

inset-x-(<custom-property>)

inset-inline: var(<custom-property>);

inset-x-(--my-length)

inset-inline: var(--my-length);

inset-x-(length:<custom-property>)

inset-inline: var(<custom-property>);

inset-x-(length:--my-length)

inset-inline: var(--my-length);

-inset-x-<number>

inset-inline: calc(var(--spacing) * -<number>);/* 0.25rem */

-inset-x-4

inset-inline: calc(var(--spacing) * -4);

-inset-x-<fraction>

inset-inline: calc(<percentage> * -1);

-inset-x-1/2

inset-inline: calc(50% * -1);

Inset Y

Class Styles

Class	Styles
`inset-y-auto`	`inset-block: auto;`
`inset-y-px`	`inset-block: 1px;`
`inset-y-full`	`inset-block: 100%;`
`-inset-y-px`	`inset-block: -1px;`
`-inset-y-full`	`inset-block: -100%;`
`inset-y-<number>`	`inset-block: calc(var(--spacing) * <number>);/* 0.25rem */`
`inset-y-4`	`inset-block: calc(var(--spacing) * 4);`
`inset-y-<fraction>`	`inset-block: <percentage>;`
`inset-y-1/2`	`inset-block: 50%;`
`inset-y-[<value>]`	`inset-block: <value>;`
`inset-y-[1rem]`	`inset-block: 1rem;`
`inset-y-(<custom-property>)`	`inset-block: var(<custom-property>);`
`inset-y-(--my-length)`	`inset-block: var(--my-length);`
`inset-y-(length:<custom-property>)`	`inset-block: var(<custom-property>);`
`inset-y-(length:--my-length)`	`inset-block: var(--my-length);`
`-inset-y-<number>`	`inset-block: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-inset-y-4`	`inset-block: calc(var(--spacing) * -4);`
`-inset-y-<fraction>`	`inset-block: calc(<percentage> * -1);`
`-inset-y-1/2`	`inset-block: calc(50% * -1);`

inset-y-auto

inset-block: auto;

inset-y-px

inset-block: 1px;

inset-y-full

inset-block: 100%;

-inset-y-px

inset-block: -1px;

-inset-y-full

inset-block: -100%;

inset-y-<number>

inset-block: calc(var(--spacing) * <number>);/* 0.25rem */

inset-y-4

inset-block: calc(var(--spacing) * 4);

inset-y-<fraction>

inset-block: <percentage>;

inset-y-1/2

inset-block: 50%;

inset-y-[<value>]

inset-block: <value>;

inset-y-[1rem]

inset-block: 1rem;

inset-y-(<custom-property>)

inset-block: var(<custom-property>);

inset-y-(--my-length)

inset-block: var(--my-length);

inset-y-(length:<custom-property>)

inset-block: var(<custom-property>);

inset-y-(length:--my-length)

inset-block: var(--my-length);

-inset-y-<number>

inset-block: calc(var(--spacing) * -<number>);/* 0.25rem */

-inset-y-4

inset-block: calc(var(--spacing) * -4);

-inset-y-<fraction>

inset-block: calc(<percentage> * -1);

-inset-y-1/2

inset-block: calc(50% * -1);

Logical Inset

Class Styles

Class	Styles
`inset-s-auto`	`inset-inline-start: auto;`
`inset-s-full`	`inset-inline-start: 100%;`
`-inset-s-full`	`inset-inline-start: -100%;`
`inset-e-auto`	`inset-inline-end: auto;`
`inset-e-full`	`inset-inline-end: 100%;`
`-inset-e-full`	`inset-inline-end: -100%;`
`inset-bs-auto`	`inset-block-start: auto;`
`inset-bs-full`	`inset-block-start: 100%;`
`-inset-bs-full`	`inset-block-start: -100%;`
`inset-be-auto`	`inset-block-end: auto;`
`inset-be-full`	`inset-block-end: 100%;`
`-inset-be-full`	`inset-block-end: -100%;`
`inset-s-<number>`	`inset-inline-start: calc(var(--spacing) * <number>);/* 0.25rem */`
`inset-s-4`	`inset-inline-start: calc(var(--spacing) * 4);`
`inset-s-<fraction>`	`inset-inline-start: <percentage>;`
`inset-s-1/2`	`inset-inline-start: 50%;`
`inset-s-[<value>]`	`inset-inline-start: <value>;`
`inset-s-[1rem]`	`inset-inline-start: 1rem;`
`inset-s-(<custom-property>)`	`inset-inline-start: var(<custom-property>);`
`inset-s-(--my-length)`	`inset-inline-start: var(--my-length);`
`inset-s-(length:<custom-property>)`	`inset-inline-start: var(<custom-property>);`
`inset-s-(length:--my-length)`	`inset-inline-start: var(--my-length);`
`-inset-s-<number>`	`inset-inline-start: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-inset-s-4`	`inset-inline-start: calc(var(--spacing) * -4);`
`-inset-s-<fraction>`	`inset-inline-start: calc(<percentage> * -1);`
`-inset-s-1/2`	`inset-inline-start: calc(50% * -1);`
`inset-e-<number>`	`inset-inline-end: calc(var(--spacing) * <number>);/* 0.25rem */`
`inset-e-4`	`inset-inline-end: calc(var(--spacing) * 4);`
`inset-e-<fraction>`	`inset-inline-end: <percentage>;`
`inset-e-1/2`	`inset-inline-end: 50%;`
`inset-e-[<value>]`	`inset-inline-end: <value>;`
`inset-e-[1rem]`	`inset-inline-end: 1rem;`
`inset-e-(<custom-property>)`	`inset-inline-end: var(<custom-property>);`
`inset-e-(--my-length)`	`inset-inline-end: var(--my-length);`
`inset-e-(length:<custom-property>)`	`inset-inline-end: var(<custom-property>);`
`inset-e-(length:--my-length)`	`inset-inline-end: var(--my-length);`
`-inset-e-<number>`	`inset-inline-end: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-inset-e-4`	`inset-inline-end: calc(var(--spacing) * -4);`
`-inset-e-<fraction>`	`inset-inline-end: calc(<percentage> * -1);`
`-inset-e-1/2`	`inset-inline-end: calc(50% * -1);`
`inset-bs-<number>`	`inset-block-start: calc(var(--spacing) * <number>);/* 0.25rem */`
`inset-bs-4`	`inset-block-start: calc(var(--spacing) * 4);`
`inset-bs-<fraction>`	`inset-block-start: <percentage>;`
`inset-bs-1/2`	`inset-block-start: 50%;`
`inset-bs-[<value>]`	`inset-block-start: <value>;`
`inset-bs-[1rem]`	`inset-block-start: 1rem;`
`inset-bs-(<custom-property>)`	`inset-block-start: var(<custom-property>);`
`inset-bs-(--my-length)`	`inset-block-start: var(--my-length);`
`inset-bs-(length:<custom-property>)`	`inset-block-start: var(<custom-property>);`
`inset-bs-(length:--my-length)`	`inset-block-start: var(--my-length);`
`-inset-bs-<number>`	`inset-block-start: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-inset-bs-4`	`inset-block-start: calc(var(--spacing) * -4);`
`-inset-bs-<fraction>`	`inset-block-start: calc(<percentage> * -1);`
`-inset-bs-1/2`	`inset-block-start: calc(50% * -1);`
`inset-be-<number>`	`inset-block-end: calc(var(--spacing) * <number>);/* 0.25rem */`
`inset-be-4`	`inset-block-end: calc(var(--spacing) * 4);`
`inset-be-<fraction>`	`inset-block-end: <percentage>;`
`inset-be-1/2`	`inset-block-end: 50%;`
`inset-be-[<value>]`	`inset-block-end: <value>;`
`inset-be-[1rem]`	`inset-block-end: 1rem;`
`inset-be-(<custom-property>)`	`inset-block-end: var(<custom-property>);`
`inset-be-(--my-length)`	`inset-block-end: var(--my-length);`
`inset-be-(length:<custom-property>)`	`inset-block-end: var(<custom-property>);`
`inset-be-(length:--my-length)`	`inset-block-end: var(--my-length);`
`-inset-be-<number>`	`inset-block-end: calc(var(--spacing) * -<number>);/* 0.25rem */`
`-inset-be-4`	`inset-block-end: calc(var(--spacing) * -4);`
`-inset-be-<fraction>`	`inset-block-end: calc(<percentage> * -1);`
`-inset-be-1/2`	`inset-block-end: calc(50% * -1);`

inset-s-auto

inset-inline-start: auto;

inset-s-full

inset-inline-start: 100%;

-inset-s-full

inset-inline-start: -100%;

inset-e-auto

inset-inline-end: auto;

inset-e-full

inset-inline-end: 100%;

-inset-e-full

inset-inline-end: -100%;

inset-bs-auto

inset-block-start: auto;

inset-bs-full

inset-block-start: 100%;

-inset-bs-full

inset-block-start: -100%;

inset-be-auto

inset-block-end: auto;

inset-be-full

inset-block-end: 100%;

-inset-be-full

inset-block-end: -100%;

inset-s-<number>

inset-inline-start: calc(var(--spacing) * <number>);/* 0.25rem */

inset-s-4

inset-inline-start: calc(var(--spacing) * 4);

inset-s-<fraction>

inset-inline-start: <percentage>;

inset-s-1/2

inset-inline-start: 50%;

inset-s-[<value>]

inset-inline-start: <value>;

inset-s-[1rem]

inset-inline-start: 1rem;

inset-s-(<custom-property>)

inset-inline-start: var(<custom-property>);

inset-s-(--my-length)

inset-inline-start: var(--my-length);

inset-s-(length:<custom-property>)

inset-inline-start: var(<custom-property>);

inset-s-(length:--my-length)

inset-inline-start: var(--my-length);

-inset-s-<number>

inset-inline-start: calc(var(--spacing) * -<number>);/* 0.25rem */

-inset-s-4

inset-inline-start: calc(var(--spacing) * -4);

-inset-s-<fraction>

inset-inline-start: calc(<percentage> * -1);

-inset-s-1/2

inset-inline-start: calc(50% * -1);

inset-e-<number>

inset-inline-end: calc(var(--spacing) * <number>);/* 0.25rem */

inset-e-4

inset-inline-end: calc(var(--spacing) * 4);

inset-e-<fraction>

inset-inline-end: <percentage>;

inset-e-1/2

inset-inline-end: 50%;

inset-e-[<value>]

inset-inline-end: <value>;

inset-e-[1rem]

inset-inline-end: 1rem;

inset-e-(<custom-property>)

inset-inline-end: var(<custom-property>);

inset-e-(--my-length)

inset-inline-end: var(--my-length);

inset-e-(length:<custom-property>)

inset-inline-end: var(<custom-property>);

inset-e-(length:--my-length)

inset-inline-end: var(--my-length);

-inset-e-<number>

inset-inline-end: calc(var(--spacing) * -<number>);/* 0.25rem */

-inset-e-4

inset-inline-end: calc(var(--spacing) * -4);

-inset-e-<fraction>

inset-inline-end: calc(<percentage> * -1);

-inset-e-1/2

inset-inline-end: calc(50% * -1);

inset-bs-<number>

inset-block-start: calc(var(--spacing) * <number>);/* 0.25rem */

inset-bs-4

inset-block-start: calc(var(--spacing) * 4);

inset-bs-<fraction>

inset-block-start: <percentage>;

inset-bs-1/2

inset-block-start: 50%;

inset-bs-[<value>]

inset-block-start: <value>;

inset-bs-[1rem]

inset-block-start: 1rem;

inset-bs-(<custom-property>)

inset-block-start: var(<custom-property>);

inset-bs-(--my-length)

inset-block-start: var(--my-length);

inset-bs-(length:<custom-property>)

inset-block-start: var(<custom-property>);

inset-bs-(length:--my-length)

inset-block-start: var(--my-length);

-inset-bs-<number>

inset-block-start: calc(var(--spacing) * -<number>);/* 0.25rem */

-inset-bs-4

inset-block-start: calc(var(--spacing) * -4);

-inset-bs-<fraction>

inset-block-start: calc(<percentage> * -1);

-inset-bs-1/2

inset-block-start: calc(50% * -1);

inset-be-<number>

inset-block-end: calc(var(--spacing) * <number>);/* 0.25rem */

inset-be-4

inset-block-end: calc(var(--spacing) * 4);

inset-be-<fraction>

inset-block-end: <percentage>;

inset-be-1/2

inset-block-end: 50%;

inset-be-[<value>]

inset-block-end: <value>;

inset-be-[1rem]

inset-block-end: 1rem;

inset-be-(<custom-property>)

inset-block-end: var(<custom-property>);

inset-be-(--my-length)

inset-block-end: var(--my-length);

inset-be-(length:<custom-property>)

inset-block-end: var(<custom-property>);

inset-be-(length:--my-length)

inset-block-end: var(--my-length);

-inset-be-<number>

inset-block-end: calc(var(--spacing) * -<number>);/* 0.25rem */

-inset-be-4

inset-block-end: calc(var(--spacing) * -4);

-inset-be-<fraction>

inset-block-end: calc(<percentage> * -1);

-inset-be-1/2

inset-block-end: calc(50% * -1);

float

isolation

Layout

inset

Quick reference

Inset

Inset End

Inset Start

Inset X

Inset Y

Logical Inset

Sfumato

Community