Skip to content

子元素间距

定义

通过工具类 space-x-* 来为元素内的所有子元素之间设置水平间距;通过工具类 space-y-* 来为元素内的所有子元素之间设置水平间距,所有可用的工具类定义如下:

工具类CSS 属性
space-x-0 > * + *margin-left: 0px;
space-y-0 > * + *margin-top: 0px;
space-x-0.5 > * + *margin-left: 2px;
space-y-0.5 > * + *margin-top: 2px;
space-x-1 > * + *margin-left: 4px;
space-y-1 > * + *margin-top: 4px;
space-x-1.5 > * + *margin-left: 6px;
space-y-1.5 > * + *margin-top: 6px;
space-x-2 > * + *margin-left: 8px;
space-y-2 > * + *margin-top: 8px;
space-x-2.5 > * + *margin-left: 10px;
space-y-2.5 > * + *margin-top: 10px;
space-x-3 > * + *margin-left: 12px;
space-y-3 > * + *margin-top: 12px;
space-x-3.5 > * + *margin-left: 14px;
space-y-3.5 > * + *margin-top: 14px;
space-x-4 > * + *margin-left: 16px;
space-y-4 > * + *margin-top: 16px;
space-x-5 > * + *margin-left: 20px;
space-y-5 > * + *margin-top: 20px;
space-x-6 > * + *margin-left: 24px;
space-y-6 > * + *margin-top: 24px;
space-x-7 > * + *margin-left: 28px;
space-y-7 > * + *margin-top: 28px;
space-x-8 > * + *margin-left: 32px;
space-y-8 > * + *margin-top: 32px;
space-x-9 > * + *margin-left: 36px;
space-y-9 > * + *margin-top: 36px;
space-x-10 > * + *margin-left: 40px;
space-y-10 > * + *margin-top: 40px;
space-x-px > * + *margin-left: 1px;
space-y-px > * + *margin-top: 1px;

示例

水平间距

1
2
3

垂直间距

1
2
3