Spacing Scale
Plugin includes a generous and comprehensive numeric spacing scale. The values are proportional, so
16 is twice as much spacing as 8 for example. Bitrix24 spacing scale
One spacing unit is equal to 2px.
| Name | Size | Pixels | Preview |
|---|---|---|---|
| none | 0px | 0px | |
| px | 1px | 1px | |
| 3xs | 2px | 2px | |
| 2xs | 4px | 4px | |
| 2xs2 | 6px | 6px | |
| xs | 8px | 8px | |
| xs2 | 10px | 10px | |
| sm | 12px | 12px | |
| sm2 | 14px | 14px | |
| md | 16px | 16px | |
| md2 | 18px | 18px | |
| lg | 20px | 20px | |
| lg2 | 22px | 22px | |
| xl | 24px | 24px | |
| xl2 | 26px | 26px | |
| 2xl | 28px | 28px | |
| 3xl | 32px | 32px | |
| 4xl | 36px | 36px | |
| 5xl | 40px | 40px | |
| 6xl | 48px | 48px | |
| 7xl | 64px | 64px | |
| 8xl | 72px | 72px |
Tailwind spacing scale
One spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.
| Name | Size | Pixels | Preview |
|---|---|---|---|
| 0 | 0px | 0px | |
| px | 1px | 1px | |
| 0.5 | 0.125rem | 2px | |
| 1 | 0.25rem | 4px | |
| 1.5 | 0.375rem | 6px | |
| 2 | 0.5rem | 8px | |
| 2.5 | 0.625rem | 10px | |
| 3 | 0.75rem | 12px | |
| 3.5 | 0.875rem | 14px | |
| 4 | 1rem | 16px | |
| 5 | 1.25rem | 20px | |
| 6 | 1.5rem | 24px | |
| 7 | 1.75rem | 28px | |
| 8 | 2rem | 32px | |
| 9 | 2.25rem | 36px | |
| 10 | 2.5rem | 40px | |
| 11 | 2.75rem | 44px | |
| 12 | 3rem | 48px | |
| 14 | 3.5rem | 56px | |
| 16 | 4rem | 64px | |
| 20 | 5rem | 80px | |
| 24 | 6rem | 96px | |
| 28 | 7rem | 112px | |
| 32 | 8rem | 128px | |
| 36 | 9rem | 144px | |
| 40 | 10rem | 160px | |
| 44 | 11rem | 176px | |
| 48 | 12rem | 192px | |
| 52 | 13rem | 208px | |
| 56 | 14rem | 224px | |
| 60 | 15rem | 240px | |
| 64 | 16rem | 256px | |
| 72 | 18rem | 288px | |
| 80 | 20rem | 320px | |
| 96 | 24rem | 384px |