Spacing

作用：

在不创建新的class的情况下更新布局。主要用于修改元素的padding或者margin

原理：

工具类class会给元素设置margin/padding/gap，其值范围0-16。

语法：{property}{direction}-{size}

property

指明空格类型

• m: margin
• p: padding
• g：gap

direction

指明property应用于哪一个方向

• t:top
• b:bottom
• l:left
• r:right
• s:start
  • LTR mode:margin-left/padding-left
  • RTL mode:margin-right/padding-right
• e:end
  • LTR mode:margin-right/padding-right
  • RTL mode:margin-left/padding-left
• x:*-left 和 *-right
• y:*-top 和 *-bottom
• a:各个方向
• c:column-gap

size

以4px的间隔递增

可用于padding，margin,gap

• 0:0
• 1:4px
• 2:8px
• 16:64px

只能用于margin

• n1:-4px
• n2:-8px
• n15:-60px
• n16:-64px
• auto:将间隔设置为自动

实践应用

网格布局

语法：{property}{direction}-{breakpoint}-{size}
例外：对xs不起作用
作用：将margin和padding应用到给定的屏幕断点

让内容水平居中

方法:mx-auto

Gap

方法：ga-3，在水平方向的内容之间创建gap。如果需要纵向的，只能结合flex-col等类实现。其他应用：导航栏顶部空白