Spacing utilities

Margin and padding #

Assign margin or padding values to an element or a subset of its sides using shorthand classes. Includes support for all and individual properties (including horizontal and vertical). Default values range from 0.25rem / 4px to 3rem / 48px.

Margin and padding Notation #

The class names for the margin and padding utilities come in the following formats:

• .{property}{sides}-{size}
• .{property}{sides}-{breakpoint}-{size}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

{property}

The {property} can be one of the following:

{sides}

The {sides} can be one of the following:

{size}

The {size} can be one of the following:

Margin and padding Examples #

The following table shows some examples of how the spacing utility classes can be used:

As the table above shows, the different utility classes available can be used to control the spacing to a great degree. Moreover, these classes are also sometimes useful for controlling the positioning of elements. For example, the .mx-auto class can be used to horizontally center block-level elements (see below), while the .ms-auto class can be used to push an element to the right (left in RTL) using flexbox.

Margin and padding Horizontal centering #

The .mx-auto class can be used for horizontally centering block-level elements with fixed widths.

<!-- Horizontally centered -->
<div class="mx-auto specific-w-100">Centered</div>

Margin and padding Negative margin #

In CSS, margin can have negative values, and Halfmoon comes with utility classes which can be used to set negative margins. These utilities come in the following formats:

• .m{sides}-{n1|n2|n3|n4|n5}
• .m{sides}-{breakpoint}-{n1|n2|n3|n4|n5}

In other words, the {size} must be prefixed with the letter n (for negative). These classes are sometimes very useful because they can be used to make sure some elements take up more than their generally allotted space.

<!-- Negative margin -->
<div class="p-4">
  <div class="mx-n4">
    ...
  </div>
</div>

In the above example, the parent container has the .p-4 class which sets its padding to var(--bs-spacer-4) / 1.5rem / 24px. However, its child box still takes up the full width (of the parent) because of the negative horizontal margins set using the .mx-n4 class.

Gap #

If an element has the display: grid or display: flex property, we can use gap utilities on it to space out the children elements. This can save on having to add margin utilities to individual children of a grid or flex container. The gap utilities come in the following formats:

• .gap-{size}
• .gap-{breakpoint}-{size}
• .row-gap-{size}
• .row-gap-{breakpoint}-{size}
• .column-gap-{size}
• .column-gap-{breakpoint}-{size}

The {size} can be any number from 0 to 5 (same as padding).