子元素间距
定义
通过工具类 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