间距（Spacing）

方便设置容器的margin 和 padding，调整容器的间距和缝隙。

1

Since 0.9.0

Bulma在各个方向提供边距m*和填充p*辅助对象：:

*t for top
*r for right
*b for bottom
*l for left
*x 水平方向 left 和 right
*y 垂直方向 top 和 bottom

您需要将边距/填充前缀与方向后缀相结合。例如：:

for a margin-top, use mt-*
for a padding-bottom, use pb-*
for both margin-left and margin-right, use mx-*

每个属性方向组合都需要附加6个值后缀之一：

Suffix	Value
`*-0`	`0`
`*-1`	`0.25rem`
`*-2`	`0.5rem`
`*-3`	`0.75rem`
`*-4`	`1rem`
`*-5`	`1.5rem`
`*-6`	`3rem`

所有间距辅助对象的列表 #

有98个间距辅助对象可供选择：

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

要使用这些类，只需将它们附加到任何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>

Configuration #

因为每个开发人员都有自己的首选项，为了满足Bulma的定制特性，可以指定自己的类名快捷方式以及间距值。

例如，如果您想要：

margin 缩写为mg
padding 不使用
horizontal 缩写为 h
vertical 也不包括在内
大小仅仅有三个值: "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`

通过自定义输出，可以将间距辅助对象的列表从98个缩小到18个。

返回头部

23222