Utilities
Inset
The Inset utility provides control over the spacing around an element's border, affecting its top, right, bottom, and left properties.
Utility Class | USS Properties |
|---|---|
| inset-0 | top: 0px; right: 0px; bottom: 0px; left: 0px; |
| inset-1 | top: 4px; right: 4px; bottom: 4px; left: 4px; |
| inset-2 | top: 8px; right: 8px; bottom: 8px; left: 8px; |
| inset-3 | top: 12px; right: 12px; bottom: 12px; left: 12px; |
| inset-4 | top: 16px; right: 16px; bottom: 16px; left: 16px; |
| inset-5 | top: 20px; right: 20px; bottom: 20px; left: 20px; |
| inset-6 | top: 24px; right: 24px; bottom: 24px; left: 24px; |
| inset-7 | top: 28px; right: 28px; bottom: 28px; left: 28px; |
| inset-8 | top: 32px; right: 32px; bottom: 32px; left: 32px; |
| inset-9 | top: 36px; right: 36px; bottom: 36px; left: 36px; |
| inset-10 | top: 40px; right: 40px; bottom: 40px; left: 40px; |
| inset-11 | top: 44px; right: 44px; bottom: 44px; left: 44px; |
| inset-12 | top: 48px; right: 48px; bottom: 48px; left: 48px; |
| inset-14 | top: 56px; right: 56px; bottom: 56px; left: 56px; |
| inset-16 | top: 64px; right: 64px; bottom: 64px; left: 64px; |
| inset-20 | top: 80px; right: 80px; bottom: 80px; left: 80px; |
| inset-24 | top: 96px; right: 96px; bottom: 96px; left: 96px; |
| inset-28 | top: 112px; right: 112px; bottom: 112px; left: 112px; |
| inset-32 | top: 128px; right: 128px; bottom: 128px; left: 128px; |
| inset-36 | top: 144px; right: 144px; bottom: 144px; left: 144px; |
| inset-40 | top: 160px; right: 160px; bottom: 160px; left: 160px; |
| inset-44 | top: 176px; right: 176px; bottom: 176px; left: 176px; |
| inset-48 | top: 192px; right: 192px; bottom: 192px; left: 192px; |
| inset-52 | top: 208px; right: 208px; bottom: 208px; left: 208px; |
| inset-56 | top: 224px; right: 224px; bottom: 224px; left: 224px; |
| inset-60 | top: 240px; right: 240px; bottom: 240px; left: 240px; |
| inset-64 | top: 256px; right: 256px; bottom: 256px; left: 256px; |
| inset-72 | top: 288px; right: 288px; bottom: 288px; left: 288px; |
| inset-80 | top: 320px; right: 320px; bottom: 320px; left: 320px; |
| inset-96 | top: 384px; right: 384px; bottom: 384px; left: 384px; |
| inset-px | top: 1px; right: 1px; bottom: 1px; left: 1px; |
| inset-0point5 | top: 2px; right: 2px; bottom: 2px; left: 2px; |
| inset-1point5 | top: 6px; right: 6px; bottom: 6px; left: 6px; |
| inset-2point5 | top: 10px; right: 10px; bottom: 10px; left: 10px; |
| inset-3point5 | top: 14px; right: 14px; bottom: 14px; left: 14px; |
| inset-minus-0 | top: 0px; right: 0px; bottom: 0px; left: 0px; |
| inset-minus-1 | top: -4px; right: -4px; bottom: -4px; left: -4px; |
| inset-minus-2 | top: -8px; right: -8px; bottom: -8px; left: -8px; |
| inset-minus-3 | top: -12px; right: -12px; bottom: -12px; left: -12px; |
| inset-minus-4 | top: -16px; right: -16px; bottom: -16px; left: -16px; |
| inset-minus-5 | top: -20px; right: -20px; bottom: -20px; left: -20px; |
| inset-minus-6 | top: -24px; right: -24px; bottom: -24px; left: -24px; |
| inset-minus-7 | top: -28px; right: -28px; bottom: -28px; left: -28px; |
| inset-minus-8 | top: -32px; right: -32px; bottom: -32px; left: -32px; |
| inset-minus-9 | top: -36px; right: -36px; bottom: -36px; left: -36px; |
| inset-minus-10 | top: -40px; right: -40px; bottom: -40px; left: -40px; |
| inset-minus-11 | top: -44px; right: -44px; bottom: -44px; left: -44px; |
| inset-minus-12 | top: -48px; right: -48px; bottom: -48px; left: -48px; |
| inset-minus-14 | top: -56px; right: -56px; bottom: -56px; left: -56px; |
| inset-minus-16 | top: -64px; right: -64px; bottom: -64px; left: -64px; |
| inset-minus-20 | top: -80px; right: -80px; bottom: -80px; left: -80px; |
| inset-minus-24 | top: -96px; right: -96px; bottom: -96px; left: -96px; |
| inset-minus-28 | top: -112px; right: -112px; bottom: -112px; left: -112px; |
| inset-minus-32 | top: -128px; right: -128px; bottom: -128px; left: -128px; |
| inset-minus-36 | top: -144px; right: -144px; bottom: -144px; left: -144px; |
| inset-minus-40 | top: -160px; right: -160px; bottom: -160px; left: -160px; |
| inset-minus-44 | top: -176px; right: -176px; bottom: -176px; left: -176px; |
| inset-minus-48 | top: -192px; right: -192px; bottom: -192px; left: -192px; |
| inset-minus-52 | top: -208px; right: -208px; bottom: -208px; left: -208px; |
| inset-minus-56 | top: -224px; right: -224px; bottom: -224px; left: -224px; |
| inset-minus-60 | top: -240px; right: -240px; bottom: -240px; left: -240px; |
| inset-minus-64 | top: -256px; right: -256px; bottom: -256px; left: -256px; |
| inset-minus-72 | top: -288px; right: -288px; bottom: -288px; left: -288px; |
| inset-minus-80 | top: -320px; right: -320px; bottom: -320px; left: -320px; |
| inset-minus-96 | top: -384px; right: -384px; bottom: -384px; left: -384px; |
| inset-minus-px | top: -1px; right: -1px; bottom: -1px; left: -1px; |
| inset-minus-0point5 | top: -2px; right: -2px; bottom: -2px; left: -2px; |
| inset-minus-1point5 | top: -6px; right: -6px; bottom: -6px; left: -6px; |
| inset-minus-2point5 | top: -10px; right: -10px; bottom: -10px; left: -10px; |
| inset-minus-3point5 | top: -14px; right: -14px; bottom: -14px; left: -14px; |
| inset-auto | top: auto; right: auto; bottom: auto; left: auto; |
| inset-1of2 | top: 50%; right: 50%; bottom: 50%; left: 50%; |
| inset-1of3 | top: 33.333333%; right: 33.333333%; bottom: 33.333333%; left: 33.333333%; |
| inset-2of3 | top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%; |
| inset-1of4 | top: 25%; right: 25%; bottom: 25%; left: 25%; |
| inset-2of4 | top: 50%; right: 50%; bottom: 50%; left: 50%; |
| inset-3of4 | top: 75%; right: 75%; bottom: 75%; left: 75%; |
| inset-1of5 | top: 20%; right: 20%; bottom: 20%; left: 20%; |
| inset-2of5 | top: 40%; right: 40%; bottom: 40%; left: 40%; |
| inset-3of5 | top: 60%; right: 60%; bottom: 60%; left: 60%; |
| inset-4of5 | top: 80%; right: 80%; bottom: 80%; left: 80%; |
| inset-1of6 | top: 16.666667%; right: 16.666667%; bottom: 16.666667%; left: 16.666667%; |
| inset-2of6 | top: 33.333333%; right: 33.333333%; bottom: 33.333333%; left: 33.333333%; |
| inset-3of6 | top: 50%; right: 50%; bottom: 50%; left: 50%; |
| inset-4of6 | top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%; |
| inset-5of6 | top: 83.333333%; right: 83.333333%; bottom: 83.333333%; left: 83.333333%; |
| inset-full | top: 100%; right: 100%; bottom: 100%; left: 100%; |
| inset-minus-1of2 | top: -50%; right: -50%; bottom: -50%; left: -50%; |
| inset-minus-1of3 | top: -33.333333%; right: -33.333333%; bottom: -33.333333%; left: -33.333333%; |
| inset-minus-2of3 | top: -66.666667%; right: -66.666667%; bottom: -66.666667%; left: -66.666667%; |
| inset-minus-1of4 | top: -25%; right: -25%; bottom: -25%; left: -25%; |
| inset-minus-2of4 | top: -50%; right: -50%; bottom: -50%; left: -50%; |
| inset-minus-3of4 | top: -75%; right: -75%; bottom: -75%; left: -75%; |
| inset-minus-full | top: -100%; right: -100%; bottom: -100%; left: -100%; |
| inset-x-0 | left: 0px; right: 0px; |
| inset-x-1 | left: 4px; right: 4px; |
| inset-x-2 | left: 8px; right: 8px; |
| inset-x-3 | left: 12px; right: 12px; |
| inset-x-4 | left: 16px; right: 16px; |
| inset-x-5 | left: 20px; right: 20px; |
| inset-x-6 | left: 24px; right: 24px; |
| inset-x-7 | left: 28px; right: 28px; |
| inset-x-8 | left: 32px; right: 32px; |
| inset-x-9 | left: 36px; right: 36px; |
| inset-x-10 | left: 40px; right: 40px; |
| inset-x-11 | left: 44px; right: 44px; |
| inset-x-12 | left: 48px; right: 48px; |
| inset-x-14 | left: 56px; right: 56px; |
| inset-x-16 | left: 64px; right: 64px; |
| inset-x-20 | left: 80px; right: 80px; |
| inset-x-24 | left: 96px; right: 96px; |
| inset-x-28 | left: 112px; right: 112px; |
| inset-x-32 | left: 128px; right: 128px; |
| inset-x-36 | left: 144px; right: 144px; |
| inset-x-40 | left: 160px; right: 160px; |
| inset-x-44 | left: 176px; right: 176px; |
| inset-x-48 | left: 192px; right: 192px; |
| inset-x-52 | left: 208px; right: 208px; |
| inset-x-56 | left: 224px; right: 224px; |
| inset-x-60 | left: 240px; right: 240px; |
| inset-x-64 | left: 256px; right: 256px; |
| inset-x-72 | left: 288px; right: 288px; |
| inset-x-80 | left: 320px; right: 320px; |
| inset-x-96 | left: 384px; right: 384px; |
| inset-x-px | left: 1px; right: 1px; |
| inset-x-0point5 | left: 2px; right: 2px; |
| inset-x-1point5 | left: 6px; right: 6px; |
| inset-x-2point5 | left: 10px; right: 10px; |
| inset-x-3point5 | left: 14px; right: 14px; |
| inset-x-minus-0 | left: 0px; right: 0px; |
| inset-x-minus-1 | left: -4px; right: -4px; |
| inset-x-minus-2 | left: -8px; right: -8px; |
| inset-x-minus-3 | left: -12px; right: -12px; |
| inset-x-minus-4 | left: -16px; right: -16px; |
| inset-x-minus-5 | left: -20px; right: -20px; |
| inset-x-minus-6 | left: -24px; right: -24px; |
| inset-x-minus-7 | left: -28px; right: -28px; |
| inset-x-minus-8 | left: -32px; right: -32px; |
| inset-x-minus-9 | left: -36px; right: -36px; |
| inset-x-minus-10 | left: -40px; right: -40px; |
| inset-x-minus-11 | left: -44px; right: -44px; |
| inset-x-minus-12 | left: -48px; right: -48px; |
| inset-x-minus-14 | left: -56px; right: -56px; |
| inset-x-minus-16 | left: -64px; right: -64px; |
| inset-x-minus-20 | left: -80px; right: -80px; |
| inset-x-minus-24 | left: -96px; right: -96px; |
| inset-x-minus-28 | left: -112px; right: -112px; |
| inset-x-minus-32 | left: -128px; right: -128px; |
| inset-x-minus-36 | left: -144px; right: -144px; |
| inset-x-minus-40 | left: -160px; right: -160px; |
| inset-x-minus-44 | left: -176px; right: -176px; |
| inset-x-minus-48 | left: -192px; right: -192px; |
| inset-x-minus-52 | left: -208px; right: -208px; |
| inset-x-minus-56 | left: -224px; right: -224px; |
| inset-x-minus-60 | left: -240px; right: -240px; |
| inset-x-minus-64 | left: -256px; right: -256px; |
| inset-x-minus-72 | left: -288px; right: -288px; |
| inset-x-minus-80 | left: -320px; right: -320px; |
| inset-x-minus-96 | left: -384px; right: -384px; |
| inset-x-minus-px | left: -1px; right: -1px; |
| inset-x-minus-0point5 | left: -2px; right: -2px; |
| inset-x-minus-1point5 | left: -6px; right: -6px; |
| inset-x-minus-2point5 | left: -10px; right: -10px; |
| inset-x-minus-3point5 | left: -14px; right: -14px; |
| inset-x-auto | left: auto; right: auto; |
| inset-x-1of2 | left: 50%; right: 50%; |
| inset-x-1of3 | left: 33.333333%; right: 33.333333%; |
| inset-x-2of3 | left: 66.666667%; right: 66.666667%; |
| inset-x-1of4 | left: 25%; right: 25%; |
| inset-x-2of4 | left: 50%; right: 50%; |
| inset-x-3of4 | left: 75%; right: 75%; |
| inset-x-1of5 | left: 20%; right: 20%; |
| inset-x-2of5 | left: 40%; right: 40%; |
| inset-x-3of5 | left: 60%; right: 60%; |
| inset-x-4of5 | left: 80%; right: 80%; |
| inset-x-1of6 | left: 16.666667%; right: 16.666667%; |
| inset-x-2of6 | left: 33.333333%; right: 33.333333%; |
| inset-x-3of6 | left: 50%; right: 50%; |
| inset-x-4of6 | left: 66.666667%; right: 66.666667%; |
| inset-x-5of6 | left: 83.333333%; right: 83.333333%; |
| inset-x-full | left: 100%; right: 100%; |
| inset-x-minus-1of2 | left: -50%; right: -50%; |
| inset-x-minus-1of3 | left: -33.333333%; right: -33.333333%; |
| inset-x-minus-2of3 | left: -66.666667%; right: -66.666667%; |
| inset-x-minus-1of4 | left: -25%; right: -25%; |
| inset-x-minus-2of4 | left: -50%; right: -50%; |
| inset-x-minus-3of4 | left: -75%; right: -75%; |
| inset-x-minus-full | left: -100%; right: -100%; |
| inset-y-0 | top: 0px; bottom: 0px; |
| inset-y-1 | top: 4px; bottom: 4px; |
| inset-y-2 | top: 8px; bottom: 8px; |
| inset-y-3 | top: 12px; bottom: 12px; |
| inset-y-4 | top: 16px; bottom: 16px; |
| inset-y-5 | top: 20px; bottom: 20px; |
| inset-y-6 | top: 24px; bottom: 24px; |
| inset-y-7 | top: 28px; bottom: 28px; |
| inset-y-8 | top: 32px; bottom: 32px; |
| inset-y-9 | top: 36px; bottom: 36px; |
| inset-y-10 | top: 40px; bottom: 40px; |
| inset-y-11 | top: 44px; bottom: 44px; |
| inset-y-12 | top: 48px; bottom: 48px; |
| inset-y-14 | top: 56px; bottom: 56px; |
| inset-y-16 | top: 64px; bottom: 64px; |
| inset-y-20 | top: 80px; bottom: 80px; |
| inset-y-24 | top: 96px; bottom: 96px; |
| inset-y-28 | top: 112px; bottom: 112px; |
| inset-y-32 | top: 128px; bottom: 128px; |
| inset-y-36 | top: 144px; bottom: 144px; |
| inset-y-40 | top: 160px; bottom: 160px; |
| inset-y-44 | top: 176px; bottom: 176px; |
| inset-y-48 | top: 192px; bottom: 192px; |
| inset-y-52 | top: 208px; bottom: 208px; |
| inset-y-56 | top: 224px; bottom: 224px; |
| inset-y-60 | top: 240px; bottom: 240px; |
| inset-y-64 | top: 256px; bottom: 256px; |
| inset-y-72 | top: 288px; bottom: 288px; |
| inset-y-80 | top: 320px; bottom: 320px; |
| inset-y-96 | top: 384px; bottom: 384px; |
| inset-y-px | top: 1px; bottom: 1px; |
| inset-y-0point5 | top: 2px; bottom: 2px; |
| inset-y-1point5 | top: 6px; bottom: 6px; |
| inset-y-2point5 | top: 10px; bottom: 10px; |
| inset-y-3point5 | top: 14px; bottom: 14px; |
| inset-y-minus-0 | top: 0px; bottom: 0px; |
| inset-y-minus-1 | top: -4px; bottom: -4px; |
| inset-y-minus-2 | top: -8px; bottom: -8px; |
| inset-y-minus-3 | top: -12px; bottom: -12px; |
| inset-y-minus-4 | top: -16px; bottom: -16px; |
| inset-y-minus-5 | top: -20px; bottom: -20px; |
| inset-y-minus-6 | top: -24px; bottom: -24px; |
| inset-y-minus-7 | top: -28px; bottom: -28px; |
| inset-y-minus-8 | top: -32px; bottom: -32px; |
| inset-y-minus-9 | top: -36px; bottom: -36px; |
| inset-y-minus-10 | top: -40px; bottom: -40px; |
| inset-y-minus-11 | top: -44px; bottom: -44px; |
| inset-y-minus-12 | top: -48px; bottom: -48px; |
| inset-y-minus-14 | top: -56px; bottom: -56px; |
| inset-y-minus-16 | top: -64px; bottom: -64px; |
| inset-y-minus-20 | top: -80px; bottom: -80px; |
| inset-y-minus-24 | top: -96px; bottom: -96px; |
| inset-y-minus-28 | top: -112px; bottom: -112px; |
| inset-y-minus-32 | top: -128px; bottom: -128px; |
| inset-y-minus-36 | top: -144px; bottom: -144px; |
| inset-y-minus-40 | top: -160px; bottom: -160px; |
| inset-y-minus-44 | top: -176px; bottom: -176px; |
| inset-y-minus-48 | top: -192px; bottom: -192px; |
| inset-y-minus-52 | top: -208px; bottom: -208px; |
| inset-y-minus-56 | top: -224px; bottom: -224px; |
| inset-y-minus-60 | top: -240px; bottom: -240px; |
| inset-y-minus-64 | top: -256px; bottom: -256px; |
| inset-y-minus-72 | top: -288px; bottom: -288px; |
| inset-y-minus-80 | top: -320px; bottom: -320px; |
| inset-y-minus-96 | top: -384px; bottom: -384px; |
| inset-y-minus-px | top: -1px; bottom: -1px; |
| inset-y-minus-0point5 | top: -2px; bottom: -2px; |
| inset-y-minus-1point5 | top: -6px; bottom: -6px; |
| inset-y-minus-2point5 | top: -10px; bottom: -10px; |
| inset-y-minus-3point5 | top: -14px; bottom: -14px; |
| inset-y-auto | top: auto; bottom: auto; |
| inset-y-1of2 | top: 50%; bottom: 50%; |
| inset-y-1of3 | top: 33.333333%; bottom: 33.333333%; |
| inset-y-2of3 | top: 66.666667%; bottom: 66.666667%; |
| inset-y-1of4 | top: 25%; bottom: 25%; |
| inset-y-2of4 | top: 50%; bottom: 50%; |
| inset-y-3of4 | top: 75%; bottom: 75%; |
| inset-y-1of5 | top: 20%; bottom: 20%; |
| inset-y-2of5 | top: 40%; bottom: 40%; |
| inset-y-3of5 | top: 60%; bottom: 60%; |
| inset-y-4of5 | top: 80%; bottom: 80%; |
| inset-y-1of6 | top: 16.666667%; bottom: 16.666667%; |
| inset-y-2of6 | top: 33.333333%; bottom: 33.333333%; |
| inset-y-3of6 | top: 50%; bottom: 50%; |
| inset-y-4of6 | top: 66.666667%; bottom: 66.666667%; |
| inset-y-5of6 | top: 83.333333%; bottom: 83.333333%; |
| inset-y-full | top: 100%; bottom: 100%; |
| inset-y-minus-1of2 | top: -50%; bottom: -50%; |
| inset-y-minus-1of3 | top: -33.333333%; bottom: -33.333333%; |
| inset-y-minus-2of3 | top: -66.666667%; bottom: -66.666667%; |
| inset-y-minus-1of4 | top: -25%; bottom: -25%; |
| inset-y-minus-2of4 | top: -50%; bottom: -50%; |
| inset-y-minus-3of4 | top: -75%; bottom: -75%; |
| inset-y-minus-full | top: -100%; bottom: -100%; |
| top-0 | top: 0px; |
| top-1 | top: 4px; |
| top-2 | top: 8px; |
| top-3 | top: 12px; |
| top-4 | top: 16px; |
| top-5 | top: 20px; |
| top-6 | top: 24px; |
| top-7 | top: 28px; |
| top-8 | top: 32px; |
| top-9 | top: 36px; |
| top-10 | top: 40px; |
| top-11 | top: 44px; |
| top-12 | top: 48px; |
| top-14 | top: 56px; |
| top-16 | top: 64px; |
| top-20 | top: 80px; |
| top-24 | top: 96px; |
| top-28 | top: 112px; |
| top-32 | top: 128px; |
| top-36 | top: 144px; |
| top-40 | top: 160px; |
| top-44 | top: 176px; |
| top-48 | top: 192px; |
| top-52 | top: 208px; |
| top-56 | top: 224px; |
| top-60 | top: 240px; |
| top-64 | top: 256px; |
| top-72 | top: 288px; |
| top-80 | top: 320px; |
| top-96 | top: 384px; |
| top-px | top: 1px; |
| top-0point5 | top: 2px; |
| top-1point5 | top: 6px; |
| top-2point5 | top: 10px; |
| top-3point5 | top: 14px; |
| top-minus-0 | top: 0px; |
| top-minus-1 | top: -4px; |
| top-minus-2 | top: -8px; |
| top-minus-3 | top: -12px; |
| top-minus-4 | top: -16px; |
| top-minus-5 | top: -20px; |
| top-minus-6 | top: -24px; |
| top-minus-7 | top: -28px; |
| top-minus-8 | top: -32px; |
| top-minus-9 | top: -36px; |
| top-minus-10 | top: -40px; |
| top-minus-11 | top: -44px; |
| top-minus-12 | top: -48px; |
| top-minus-14 | top: -56px; |
| top-minus-16 | top: -64px; |
| top-minus-20 | top: -80px; |
| top-minus-24 | top: -96px; |
| top-minus-28 | top: -112px; |
| top-minus-32 | top: -128px; |
| top-minus-36 | top: -144px; |
| top-minus-40 | top: -160px; |
| top-minus-44 | top: -176px; |
| top-minus-48 | top: -192px; |
| top-minus-52 | top: -208px; |
| top-minus-56 | top: -224px; |
| top-minus-60 | top: -240px; |
| top-minus-64 | top: -256px; |
| top-minus-72 | top: -288px; |
| top-minus-80 | top: -320px; |
| top-minus-96 | top: -384px; |
| top-minus-px | top: -1px; |
| top-minus-0point5 | top: -2px; |
| top-minus-1point5 | top: -6px; |
| top-minus-2point5 | top: -10px; |
| top-minus-3point5 | top: -14px; |
| top-auto | top: auto; |
| top-1of2 | top: 50%; |
| top-1of3 | top: 33.333333%; |
| top-2of3 | top: 66.666667%; |
| top-1of4 | top: 25%; |
| top-2of4 | top: 50%; |
| top-3of4 | top: 75%; |
| top-1of5 | top: 20%; |
| top-2of5 | top: 40%; |
| top-3of5 | top: 60%; |
| top-4of5 | top: 80%; |
| top-1of6 | top: 16.666667%; |
| top-2of6 | top: 33.333333%; |
| top-3of6 | top: 50%; |
| top-4of6 | top: 66.666667%; |
| top-5of6 | top: 83.333333%; |
| top-full | top: 100%; |
| top-minus-1of2 | top: -50%; |
| top-minus-1of3 | top: -33.333333%; |
| top-minus-2of3 | top: -66.666667%; |
| top-minus-1of4 | top: -25%; |
| top-minus-2of4 | top: -50%; |
| top-minus-3of4 | top: -75%; |
| top-minus-full | top: -100%; |
| right-0 | right: 0px; |
| right-1 | right: 4px; |
| right-2 | right: 8px; |
| right-3 | right: 12px; |
| right-4 | right: 16px; |
| right-5 | right: 20px; |
| right-6 | right: 24px; |
| right-7 | right: 28px; |
| right-8 | right: 32px; |
| right-9 | right: 36px; |
| right-10 | right: 40px; |
| right-11 | right: 44px; |
| right-12 | right: 48px; |
| right-14 | right: 56px; |
| right-16 | right: 64px; |
| right-20 | right: 80px; |
| right-24 | right: 96px; |
| right-28 | right: 112px; |
| right-32 | right: 128px; |
| right-36 | right: 144px; |
| right-40 | right: 160px; |
| right-44 | right: 176px; |
| right-48 | right: 192px; |
| right-52 | right: 208px; |
| right-56 | right: 224px; |
| right-60 | right: 240px; |
| right-64 | right: 256px; |
| right-72 | right: 288px; |
| right-80 | right: 320px; |
| right-96 | right: 384px; |
| right-px | right: 1px; |
| right-0point5 | right: 2px; |
| right-1point5 | right: 6px; |
| right-2point5 | right: 10px; |
| right-3point5 | right: 14px; |
| right-minus-0 | right: 0px; |
| right-minus-1 | right: -4px; |
| right-minus-2 | right: -8px; |
| right-minus-3 | right: -12px; |
| right-minus-4 | right: -16px; |
| right-minus-5 | right: -20px; |
| right-minus-6 | right: -24px; |
| right-minus-7 | right: -28px; |
| right-minus-8 | right: -32px; |
| right-minus-9 | right: -36px; |
| right-minus-10 | right: -40px; |
| right-minus-11 | right: -44px; |
| right-minus-12 | right: -48px; |
| right-minus-14 | right: -56px; |
| right-minus-16 | right: -64px; |
| right-minus-20 | right: -80px; |
| right-minus-24 | right: -96px; |
| right-minus-28 | right: -112px; |
| right-minus-32 | right: -128px; |
| right-minus-36 | right: -144px; |
| right-minus-40 | right: -160px; |
| right-minus-44 | right: -176px; |
| right-minus-48 | right: -192px; |
| right-minus-52 | right: -208px; |
| right-minus-56 | right: -224px; |
| right-minus-60 | right: -240px; |
| right-minus-64 | right: -256px; |
| right-minus-72 | right: -288px; |
| right-minus-80 | right: -320px; |
| right-minus-96 | right: -384px; |
| right-minus-px | right: -1px; |
| right-minus-0point5 | right: -2px; |
| right-minus-1point5 | right: -6px; |
| right-minus-2point5 | right: -10px; |
| right-minus-3point5 | right: -14px; |
| right-auto | right: auto; |
| right-1of2 | right: 50%; |
| right-1of3 | right: 33.333333%; |
| right-2of3 | right: 66.666667%; |
| right-1of4 | right: 25%; |
| right-2of4 | right: 50%; |
| right-3of4 | right: 75%; |
| right-1of5 | right: 20%; |
| right-2of5 | right: 40%; |
| right-3of5 | right: 60%; |
| right-4of5 | right: 80%; |
| right-1of6 | right: 16.666667%; |
| right-2of6 | right: 33.333333%; |
| right-3of6 | right: 50%; |
| right-4of6 | right: 66.666667%; |
| right-5of6 | right: 83.333333%; |
| right-full | right: 100%; |
| right-minus-1of2 | right: -50%; |
| right-minus-1of3 | right: -33.333333%; |
| right-minus-2of3 | right: -66.666667%; |
| right-minus-1of4 | right: -25%; |
| right-minus-2of4 | right: -50%; |
| right-minus-3of4 | right: -75%; |
| right-minus-full | right: -100%; |
| bottom-0 | bottom: 0px; |
| bottom-1 | bottom: 4px; |
| bottom-2 | bottom: 8px; |
| bottom-3 | bottom: 12px; |
| bottom-4 | bottom: 16px; |
| bottom-5 | bottom: 20px; |
| bottom-6 | bottom: 24px; |
| bottom-7 | bottom: 28px; |
| bottom-8 | bottom: 32px; |
| bottom-9 | bottom: 36px; |
| bottom-10 | bottom: 40px; |
| bottom-11 | bottom: 44px; |
| bottom-12 | bottom: 48px; |
| bottom-14 | bottom: 56px; |
| bottom-16 | bottom: 64px; |
| bottom-20 | bottom: 80px; |
| bottom-24 | bottom: 96px; |
| bottom-28 | bottom: 112px; |
| bottom-32 | bottom: 128px; |
| bottom-36 | bottom: 144px; |
| bottom-40 | bottom: 160px; |
| bottom-44 | bottom: 176px; |
| bottom-48 | bottom: 192px; |
| bottom-52 | bottom: 208px; |
| bottom-56 | bottom: 224px; |
| bottom-60 | bottom: 240px; |
| bottom-64 | bottom: 256px; |
| bottom-72 | bottom: 288px; |
| bottom-80 | bottom: 320px; |
| bottom-96 | bottom: 384px; |
| bottom-px | bottom: 1px; |
| bottom-0point5 | bottom: 2px; |
| bottom-1point5 | bottom: 6px; |
| bottom-2point5 | bottom: 10px; |
| bottom-3point5 | bottom: 14px; |
| bottom-minus-0 | bottom: 0px; |
| bottom-minus-1 | bottom: -4px; |
| bottom-minus-2 | bottom: -8px; |
| bottom-minus-3 | bottom: -12px; |
| bottom-minus-4 | bottom: -16px; |
| bottom-minus-5 | bottom: -20px; |
| bottom-minus-6 | bottom: -24px; |
| bottom-minus-7 | bottom: -28px; |
| bottom-minus-8 | bottom: -32px; |
| bottom-minus-9 | bottom: -36px; |
| bottom-minus-10 | bottom: -40px; |
| bottom-minus-11 | bottom: -44px; |
| bottom-minus-12 | bottom: -48px; |
| bottom-minus-14 | bottom: -56px; |
| bottom-minus-16 | bottom: -64px; |
| bottom-minus-20 | bottom: -80px; |
| bottom-minus-24 | bottom: -96px; |
| bottom-minus-28 | bottom: -112px; |
| bottom-minus-32 | bottom: -128px; |
| bottom-minus-36 | bottom: -144px; |
| bottom-minus-40 | bottom: -160px; |
| bottom-minus-44 | bottom: -176px; |
| bottom-minus-48 | bottom: -192px; |
| bottom-minus-52 | bottom: -208px; |
| bottom-minus-56 | bottom: -224px; |
| bottom-minus-60 | bottom: -240px; |
| bottom-minus-64 | bottom: -256px; |
| bottom-minus-72 | bottom: -288px; |
| bottom-minus-80 | bottom: -320px; |
| bottom-minus-96 | bottom: -384px; |
| bottom-minus-px | bottom: -1px; |
| bottom-minus-0point5 | bottom: -2px; |
| bottom-minus-1point5 | bottom: -6px; |
| bottom-minus-2point5 | bottom: -10px; |
| bottom-minus-3point5 | bottom: -14px; |
| bottom-auto | bottom: auto; |
| bottom-1of2 | bottom: 50%; |
| bottom-1of3 | bottom: 33.333333%; |
| bottom-2of3 | bottom: 66.666667%; |
| bottom-1of4 | bottom: 25%; |
| bottom-2of4 | bottom: 50%; |
| bottom-3of4 | bottom: 75%; |
| bottom-1of5 | bottom: 20%; |
| bottom-2of5 | bottom: 40%; |
| bottom-3of5 | bottom: 60%; |
| bottom-4of5 | bottom: 80%; |
| bottom-1of6 | bottom: 16.666667%; |
| bottom-2of6 | bottom: 33.333333%; |
| bottom-3of6 | bottom: 50%; |
| bottom-4of6 | bottom: 66.666667%; |
| bottom-5of6 | bottom: 83.333333%; |
| bottom-full | bottom: 100%; |
| bottom-minus-1of2 | bottom: -50%; |
| bottom-minus-1of3 | bottom: -33.333333%; |
| bottom-minus-2of3 | bottom: -66.666667%; |
| bottom-minus-1of4 | bottom: -25%; |
| bottom-minus-2of4 | bottom: -50%; |
| bottom-minus-3of4 | bottom: -75%; |
| bottom-minus-full | bottom: -100%; |
| left-0 | left: 0px; |
| left-1 | left: 4px; |
| left-2 | left: 8px; |
| left-3 | left: 12px; |
| left-4 | left: 16px; |
| left-5 | left: 20px; |
| left-6 | left: 24px; |
| left-7 | left: 28px; |
| left-8 | left: 32px; |
| left-9 | left: 36px; |
| left-10 | left: 40px; |
| left-11 | left: 44px; |
| left-12 | left: 48px; |
| left-14 | left: 56px; |
| left-16 | left: 64px; |
| left-20 | left: 80px; |
| left-24 | left: 96px; |
| left-28 | left: 112px; |
| left-32 | left: 128px; |
| left-36 | left: 144px; |
| left-40 | left: 160px; |
| left-44 | left: 176px; |
| left-48 | left: 192px; |
| left-52 | left: 208px; |
| left-56 | left: 224px; |
| left-60 | left: 240px; |
| left-64 | left: 256px; |
| left-72 | left: 288px; |
| left-80 | left: 320px; |
| left-96 | left: 384px; |
| left-px | left: 1px; |
| left-0point5 | left: 2px; |
| left-1point5 | left: 6px; |
| left-2point5 | left: 10px; |
| left-3point5 | left: 14px; |
| left-minus-0 | left: 0px; |
| left-minus-1 | left: -4px; |
| left-minus-2 | left: -8px; |
| left-minus-3 | left: -12px; |
| left-minus-4 | left: -16px; |
| left-minus-5 | left: -20px; |
| left-minus-6 | left: -24px; |
| left-minus-7 | left: -28px; |
| left-minus-8 | left: -32px; |
| left-minus-9 | left: -36px; |
| left-minus-10 | left: -40px; |
| left-minus-11 | left: -44px; |
| left-minus-12 | left: -48px; |
| left-minus-14 | left: -56px; |
| left-minus-16 | left: -64px; |
| left-minus-20 | left: -80px; |
| left-minus-24 | left: -96px; |
| left-minus-28 | left: -112px; |
| left-minus-32 | left: -128px; |
| left-minus-36 | left: -144px; |
| left-minus-40 | left: -160px; |
| left-minus-44 | left: -176px; |
| left-minus-48 | left: -192px; |
| left-minus-52 | left: -208px; |
| left-minus-56 | left: -224px; |
| left-minus-60 | left: -240px; |
| left-minus-64 | left: -256px; |
| left-minus-72 | left: -288px; |
| left-minus-80 | left: -320px; |
| left-minus-96 | left: -384px; |
| left-minus-px | left: -1px; |
| left-minus-0point5 | left: -2px; |
| left-minus-1point5 | left: -6px; |
| left-minus-2point5 | left: -10px; |
| left-minus-3point5 | left: -14px; |
| left-auto | left: auto; |
| left-1of2 | left: 50%; |
| left-1of3 | left: 33.333333%; |
| left-2of3 | left: 66.666667%; |
| left-1of4 | left: 25%; |
| left-2of4 | left: 50%; |
| left-3of4 | left: 75%; |
| left-1of5 | left: 20%; |
| left-2of5 | left: 40%; |
| left-3of5 | left: 60%; |
| left-4of5 | left: 80%; |
| left-1of6 | left: 16.666667%; |
| left-2of6 | left: 33.333333%; |
| left-3of6 | left: 50%; |
| left-4of6 | left: 66.666667%; |
| left-5of6 | left: 83.333333%; |
| left-full | left: 100%; |
| left-minus-1of2 | left: -50%; |
| left-minus-1of3 | left: -33.333333%; |
| left-minus-2of3 | left: -66.666667%; |
| left-minus-1of4 | left: -25%; |
| left-minus-2of4 | left: -50%; |
| left-minus-3of4 | left: -75%; |
| left-minus-full | left: -100%; |
Usage in UXML
Fixed Inset
You can use fixed inset values to apply uniform spacing on all sides of an element. For example, inset-4 applies a 16px space on the top, right, bottom, and left of an element.
<ui:VisualElement class="inset-4">
<!-- Element with 16px space on all sides -->
</ui:VisualElement>
Percentage Inset
For relative spacing based on the container's size, use percentage classes like inset-1of3 which applies a 33.333333% space on all sides.
<ui:VisualElement class="inset-1of3">
<!-- Element with 33.333333% space on all sides relative to its container -->
</ui:VisualElement>
Negative Inset
To apply negative spacing, use classes like inset-minus-2. This can be used for overlapping elements or creating unique layout effects.
<ui:VisualElement class="inset-minus-2">
<!-- Element with -8px space on all sides -->
</ui:VisualElement>
Directional Inset
You can also apply spacing to specific sides of an element. For instance, top-4 applies 16px space only to the top, while right-2 applies 8px space only to the right side.
<ui:VisualElement class="top-4 right-2">
<!-- Element with 16px space on top and 8px space on the right -->
</ui:VisualElement>
Customize
Modifier Variations
You can customize which modifier variations of the Inset utility are generated, such as pseudo-classes (e.g., hover, focus) and custom modifiers.
Inset utility.By fine-tuning the utility variations, you maintain control over your stylesheet's size and complexity, ensuring that only necessary styles are included. To update these values:
- Open the Theme Config Asset: Find the asset within your Unity project.
- Navigate to the 'Utilities' Section: Locate the
Insetutility. - Adjust Modifier Variations: Select which modifiers you want to be generated for the utility. Keep in mind that the order of the modifiers will affect the order and specificity of the generated USS classes.
Class Tags and Properties
The Inset utility generates classes based on predefined tags and their associated USS properties. While we recommend keeping these defaults for consistency and ease of reference in our documentation, you have the option to customize them to suit your project's specific needs.
These values are prepended to the defined values in this format tag-{value}. If a tag is empty, the generated class will simply be the value by itself.
Here are the default tags and the USS properties they set for the Inset utility:
- inset : top, right, bottom, left
- inset-x : left, right
- inset-y : top, bottom
- top : top
- right : right
- bottom : bottom
- left : left
To customize these tags and properties, you can edit the Tag Property Map field for the Inset utility in the Theme Config asset. This allows you to define new tags or modify existing ones, thus tailoring the generated classes to your preferences.
Extending Core Fields
The Inset utility uses values from the following fields from the Core section of the Theme Config asset:
- Spacing
- NegativeSpacing
To customize or define these extended fields:
- Open the Theme Config Asset: Locate the asset within your Unity project.
- Navigate to the 'Utilities' Section: Find the
Insetutility. - Customize Extend Fields: Modify or add fields in the
Extend Fieldsarray to change the core configuration values that are extended. You'll only be able to extend fields of the same type.
Disable Utility
The Inset utility is enabled by default. You can disable it by unchecking the Enabled option in the Theme Config asset. This will prevent the generation of the utility's styles.