block element is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them:
As you can see, the first two blocks have a
margin-bottom applied, but not the third one.. 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.
block, the HTML elements would have no space between them:
One line of CSS #
As you can see, the CSS of the
block is very simple: it applies a
margin-bottom on all siblings, except the last one.
This prevents the last sibling to add unnecessary space at the bottom.
Already used everywhere in Bulma #
As a matter of fact, you're already using the
block without knowing it. The
block CSS properties are shared across several Bulma elements and components:
This is thanks to the
@extend %block Sass placeholder feature.
As a result, no matter which Bulma elements and components you are using, and no matter their order, they will have a consistent space between them.