间距辅助（Spacing helpers）

修改面向一个或多个视口宽对的文字型号和颜色

Since 0.9.0

Bulma 提供所有方向的外边距（margin）m* 和内边距（padding）p*辅助类：

*t 是顶端（top）
*r 是右侧（right）
*b 是底端（bottom）
*l 是左侧（left）
*x 是水平方向（包括左侧和右侧）
*y 是垂直方向（包括顶端和底端）

您需要联合使用内边距/外边距和方向的前缀。例如：

对于 margin-top 使用 mt-*
对于 padding-bottom 使用 pb-*
对于 margin-left 和 margin-right 使用 mx-*

每次使用这些 property-direction 联合符号时需要附加 6 种值后缀之一：

后缀	值
`*-0`	`0`
`*-1`	`0.25rem`
`*-2`	`0.5rem`
`*-3`	`0.75rem`
`*-4`	`1rem`
`*-5`	`1.5rem`
`*-6`	`3rem`

所有间距辅助类列表 #

共有 112 种间距辅助类可供选择：

Property	Shortcut	Classes ↓
Values →		`0`	`0.25rem`	`0.5rem`	`0.75rem`	`1rem`	`1.5rem`	`3rem`	`auto`
`margin`	`m`	`m-0`	`m-1`	`m-2`	`m-3`	`m-4`	`m-5`	`m-6`	`m-auto`
`margin-top`	`mt`	`mt-0`	`mt-1`	`mt-2`	`mt-3`	`mt-4`	`mt-5`	`mt-6`	`mt-auto`
`margin-right`	`mr`	`mr-0`	`mr-1`	`mr-2`	`mr-3`	`mr-4`	`mr-5`	`mr-6`	`mr-auto`
`margin-bottom`	`mb`	`mb-0`	`mb-1`	`mb-2`	`mb-3`	`mb-4`	`mb-5`	`mb-6`	`mb-auto`
`margin-left`	`ml`	`ml-0`	`ml-1`	`ml-2`	`ml-3`	`ml-4`	`ml-5`	`ml-6`	`ml-auto`
`margin-left` and `margin-right`	`mx`	`mx-0`	`mx-1`	`mx-2`	`mx-3`	`mx-4`	`mx-5`	`mx-6`	`mx-auto`
`margin-top` and `margin-bottom`	`my`	`my-0`	`my-1`	`my-2`	`my-3`	`my-4`	`my-5`	`my-6`	`my-auto`
`padding`	`p`	`p-0`	`p-1`	`p-2`	`p-3`	`p-4`	`p-5`	`p-6`	`p-auto`
`padding-top`	`pt`	`pt-0`	`pt-1`	`pt-2`	`pt-3`	`pt-4`	`pt-5`	`pt-6`	`pt-auto`
`padding-right`	`pr`	`pr-0`	`pr-1`	`pr-2`	`pr-3`	`pr-4`	`pr-5`	`pr-6`	`pr-auto`
`padding-bottom`	`pb`	`pb-0`	`pb-1`	`pb-2`	`pb-3`	`pb-4`	`pb-5`	`pb-6`	`pb-auto`
`padding-left`	`pl`	`pl-0`	`pl-1`	`pl-2`	`pl-3`	`pl-4`	`pl-5`	`pl-6`	`pl-auto`
`padding-left` and `padding-right`	`px`	`px-0`	`px-1`	`px-2`	`px-3`	`px-4`	`px-5`	`px-6`	`px-auto`
`padding-top` and `padding-bottom`	`py`	`py-0`	`py-1`	`py-2`	`py-3`	`py-4`	`py-5`	`py-6`	`py-auto`

使用这些类，将其添加到人任何 HTML 元素后面即可：

<!-- Adds 1rem of margin at the bottom -->
<p class="mb-4">
  Margin bottom
</p>

<!-- Adds 0.25rem of padding on the left and the right -->
<p class="px-1">
  Horizontal padding
</p>

<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
<p class="mr-0 pt-3">
  Both
</p>

配置 #

由于每个开发者都有自己的个人习惯，正好 Bulma 也有定制的功能，所以您可以自行定制类名简写和间距值。

例如，如果您想要：

margin 简写为 mg
padding 就没有
horizontal 简写为 h
vertical 也不要了
只有 3 个值："small" 是 10px，"medium" 是 30px，"large" 是 60px

您可以通过定制 SCSS 变量简化 CSS 输出：

$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);

Property	Shortcut	Classes ↓
Values →		`10px`	`30px`	`60px`
`margin`	`mg`	`mg-small`	`mg-medium`	`mg-large`
`margin-top`	`mgt`	`mgt-small`	`mgt-medium`	`mgt-large`
`margin-right`	`mgr`	`mgr-small`	`mgr-medium`	`mgr-large`
`margin-bottom`	`mgb`	`mgb-small`	`mgb-medium`	`mgb-large`
`margin-left`	`mgl`	`mgl-small`	`mgl-medium`	`mgl-large`
`margin-left` and `margin-right`	`mgh`	`mgh-small`	`mgh-medium`	`mgh-large`