Skip to main content

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