Sponsor
Block
Bulma’s most basic spacer block
The block element is a simple spacer tool. It allows sibling HTML
elements to have a consistent margin between them:
Example
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>
As you can see, the first two blocks have a margin-bottom applied, but
not the third .. That is because Bulma applies a space on all blocks,
except the last one. This means you can use as many blocks as you want, the spacing will only
appear between them.
Without using block, the HTML elements would have no space between them:
Example
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>
As a matter of fact, you're already using the block without knowing it. Its CSS
properties are shared across several Bulma elements and components:
breadcrumblevelmessagepaginationtabsboxcontentnotificationotherprogresstabletitleThis is thanks to the @extend %block Sass placeholder feature.
Here's how it would look like in comparison:
Without block
Error
With block
Error
No matter which Bulma elements and components you are using, and no matter their order, they will have a consistent space between them.
As you can see, the CSS of the block is very simple: it applies a margin-bottom on all
siblings, except the last one.
.block:not(:last-child) {
margin-bottom: 1.5rem;
}This prevents the last sibling from adding unnecessary space at the bottom.
|
CSS Variable
|
Value
|
|---|---|
|
|
