Spacing

You can use the spacing helpers to set the margin or padding of any element.

Customize spacing helpers

The sizes that will be used to generate the spacing helpers can be defined in the space field of your theme.

export default {
    space: {
        "0": "0px",
        "1": "0.25rem",
        "2": "0.5rem",
        "4": "1rem",
        // ...other sizes
    },
    // ...other configuration
};

The following sizes will be always included for generating the spacing helpers, regardless the sizes you provide in your theme configuration:

Uniform padding or margin

Use has-p-{size} to set the padding of all sides of the element, or has-m-{size} to set the margin of all sizes of the element.

<div class="has-p-6 has-bg-primary is-rounded">
    <strong>has-p-6</strong>
</div>

Directional padding or margin

Use has-p{direction}-{size} or has-m{direction}-{size} to set the padding or margin of one side of the element. The following sides are available:

<div class="has-p-4 has-pt-12 has-m-4 has-bg-primary is-rounded">
    <strong>has-pt-12</strong>
</div>
<div class="has-p-4 has-pr-12 has-m-4 has-bg-primary is-rounded">
    <strong>has-pr-12</strong>
</div>
<div class="has-p-4 has-pb-12 has-m-4 has-bg-primary is-rounded">
    <strong>has-pb-12</strong>
</div>
<div class="has-p-4 has-pl-12 has-m-4 has-bg-primary is-rounded">
    <strong>has-pl-12</strong>
</div>

Centering elements

Use has-ml-auto and has-mr-auto classnames to set the margin left and right to auto. This will center the block with a fixed width.

<div class="has-ml-auto has-mr-auto has-p-3 has-w-32 has-bg-primary is-rounded">
    <strong>Centered</strong>
</div>

Responsive spacing

You can control the spacing of an element at a specific breakpoint adding a -{breakpoint} suffix to the padding or margin class.

<div class="has-p-3 has-p-none-mobile">
    . . .
</div>