Spacing

Padding

Utilities for controlling an element's padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Customizing
windi.config.js
export default {
  theme: {
    padding: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Padding Y

Utilities for controlling an element's vertical padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding X

Utilities for controlling an element's horizontal padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Top

Utilities for controlling an element's top padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Left

Utilities for controlling an element's left padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Bottom

Utilities for controlling an element's bottom padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Right

Utilities for controlling an element's right padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Margin

Utilities for controlling an element's margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS
Customizing
windi.config.js
export default {
  theme: {
    margin: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Margin Y

Utilities for controlling an element's vertical margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin X

Utilities for controlling an element's horizontal margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Top

Utilities for controlling an element's top margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Left

Utilities for controlling an element's left margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Bottom

Utilities for controlling an element's bottom margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Right

Utilities for controlling an element's right margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Space Between Y

Utilities for controlling the space between vertical align child elements.

0
px
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS
Customizing
windi.config.js
export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between Y Reverse

If your elements are in reverse order (using say flex-col-reverse), use the space-y-reverse utilities to ensure the space is added to the correct side of each element.

CSS

Space Between X

Utilities for controlling the space between horizontal align child elements.

0
px
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS
Customizing
windi.config.js
export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between X Reverse

If your elements are in reverse order (using say flex-row-reverse), use the space-x-reverse utilities to ensure the space is added to the correct side of each element.

CSS
Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.