块
Bulma 最基本的间隔符 块
block 元素是一个简单的 间隔工具。它允许 同级 HTML 元素在其之间保持一致的边距
示例
HTML
<div class="block">
This text is within a <strong>block</strong>.
</div>
<div class="block">
This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div class="block">
This text is within a <strong>third block</strong>. This block has no margin at the bottom.
</div>
如你所见，前两个块应用了 margin-bottom，但 第三个没有。这是因为 Bulma 对所有块应用了空间，最后一个除外。这意味着你可以使用任意数量的块，间距只会出现在 它们之间。
如果不使用 block，HTML 元素之间将没有空间
示例
HTML
<div>
This text is <em>not</em> within a <strong>block</strong>.
</div>
<div>
This text <em>isn't</em> within a <strong>block</strong> either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div>
This text is also <em>not</em> within a <strong>block</strong>.
</div>
事实上，你已经在使用 block 了，只是你不知道而已。它的 CSS 属性在几个 Bulma 元素和组件中是共享的
面包屑级别消息分页选项卡盒子内容通知其他进度表格标题这要归功于 @extend %block Sass 占位符特性。
以下是对比后的效果
没有块
错误
有块
错误
无论你使用哪些 Bulma 元素和组件，也不管它们的顺序如何，它们之间都会有一致的空间。
正如你所看到的，block 的 CSS 非常简单：它对所有兄弟元素应用一个 margin-bottom，除了最后一个。
.block:not(:last-child) {
margin-bottom: 1.5rem;
}这可以防止最后一个兄弟元素在底部添加不必要的空间。
|
Sass 变量
|
CSS 变量
|
值
|
|---|