Spacing in the DevExpress Design System
The DevExpress Design System defines a standard distance scale (in rem units) for margins, padding, gaps, and layout offsets. This predefined scale ensures visual rhythm, consistent density, and responsive scalability. The spacing scale also includes negative values for overlaps and pull-ins.
Important
Applicable to DevExpress Blazor suite only.
The spacing scale corresponds to a group of base CSS variables shared by all DevExpress themes (no theme-level overrides).
The following section lists all available CSS variables and their associated values:
CSS Variables
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-spacing-0 |
0rem | |
--dxds-spacing-10 |
0.0625rem | |
--dxds-spacing-20 |
0.125rem | |
--dxds-spacing-30 |
0.1875rem | |
--dxds-spacing-40 |
0.25rem | |
--dxds-spacing-50 |
0.3125rem | |
--dxds-spacing-60 |
0.375rem | |
--dxds-spacing-70 |
0.4375rem | |
--dxds-spacing-80 |
0.5rem | |
--dxds-spacing-90 |
0.5625rem | |
--dxds-spacing-100 |
0.625rem | |
--dxds-spacing-110 |
0.6875rem | |
--dxds-spacing-120 |
0.75rem | |
--dxds-spacing-130 |
0.8125rem | |
--dxds-spacing-140 |
0.875rem | |
--dxds-spacing-150 |
0.9375rem | |
--dxds-spacing-160 |
1rem | |
--dxds-spacing-170 |
1.0625rem | |
--dxds-spacing-180 |
1.125rem | |
--dxds-spacing-190 |
1.1875rem | |
--dxds-spacing-200 |
1.25rem | |
--dxds-spacing-210 |
1.3125rem | |
--dxds-spacing-220 |
1.375rem | |
--dxds-spacing-230 |
1.4375rem | |
--dxds-spacing-240 |
1.5rem | |
--dxds-spacing-260 |
1.625rem | |
--dxds-spacing-280 |
1.75rem | |
--dxds-spacing-300 |
1.875rem | |
--dxds-spacing-320 |
2rem | |
--dxds-spacing-360 |
2.25rem | |
--dxds-spacing-400 |
2.5rem | |
--dxds-spacing-440 |
2.75rem | |
--dxds-spacing-480 |
3rem | |
--dxds-spacing-520 |
3.25rem | |
--dxds-spacing-560 |
3.5rem | |
--dxds-spacing-600 |
3.75rem | |
--dxds-spacing-640 |
4rem | |
--dxds-spacing-720 |
4.5rem | |
--dxds-spacing-760 |
4.75rem | |
--dxds-spacing-800 |
5rem | |
--dxds-spacing-880 |
5.5rem | |
--dxds-spacing-940 |
5.875rem | |
--dxds-spacing-960 |
6rem | |
--dxds-spacing-1000 |
6.25rem | |
--dxds-spacing-1200 |
7.5rem | |
--dxds-spacing-1600 |
10rem | |
--dxds-spacing-minus-10 |
-0.0625rem | |
--dxds-spacing-minus-20 |
-0.125rem | |
--dxds-spacing-minus-40 |
-0.25rem |