赞助
Block
Bulma 最基本的间隔 block
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>正如你所看到的，前两个 block 应用了 margin-bottom，但是 不是第三个。 这是因为 Bulma 在所有 block 上应用了一个空格，除了最后一个。 这意味着你可以使用任意数量的 block，间距只会出现在 它们之间。
如果不使用 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 元素和组件中 共享
breadcrumblevelmessagepaginationtabsboxcontentnotificationotherprogresstabletitle这要归功于 @extend %block Sass 占位符特性。
以下是比较效果
没有 block
错误
使用 block
错误
无论你使用哪些 Bulma 元素和组件，无论它们的顺序如何，它们之间都会有一个 一致的间距。
正如你所看到的，block 的 CSS 非常简单：它在所有同级元素上应用 margin-bottom，除了最后一个。
.block:not(:last-child) {
margin-bottom: 1.5rem;
}这可以防止最后一个同级元素在底部添加不必要的空间。
|
CSS 变量
|
值
|
|---|---|
|
|
