Logo Windi CSS

Интервал

Отступы

Утилиты для управления отступом элемента.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    padding: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Padding Y 
Утилиты для управления отступом элемента по вертикали.
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Padding X 
Утилиты для управления отступом элемента по горизонтали.
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Padding Top 
Утилиты для управления отступом сверху элемента.
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Padding Left 
Утилиты для управления левым отступом элемента.
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Padding Bottom 
Утилиты для управления отступом снизу элемента.
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Padding Right 
Утилиты для управления отступом справа элемента.
0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Поля 
Утилиты для управления полями элемента.
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
 Персонализация 
windi.config.js
export default {
  theme: {
    margin: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Margin Y 
Утилиты для управления вертикальным отступом элемента.
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 
Утилиты для управления горизонтальным отступом элемента.
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 
Утилиты для управления верхним полем элемента.
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 
Утилиты для управления левым полем элемента.
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 
Утилиты для управления нижним полем элемента.
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 
Утилиты для управления правым полем элемента.
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 
Утилиты для управления пространством между дочерними элементами вертикального выравнивания.
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
 Персонализация 
windi.config.js
export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between Y Reverse 
Если ваши элементы расположены в обратном порядке (например, с помощью flex-col-reverse), используйте утилиты space-y-reverse, чтобы гарантировать, что пространство добавлено с правильной стороны каждого элемента.
CSS
Space Between X 
Утилиты для управления пространством между дочерними элементами по горизонтали.
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
 Персонализация 
windi.config.js
export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between X Reverse 
Если ваши элементы расположены в обратном порядке (например, с помощью flex-row-reverse), используйте утилиты space-x-reverse, чтобы гарантировать, что пространство добавлено с правильной стороны каждого элемента.
CSS