Spacing

In Haze, spacing is managed through margin and padding adjustments. By default, Haze offers seven values for both margin and padding, which adapt responsively according to the viewport width or screen size.

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The syntax for each declaration follows simple format that has four elements:

• The property:
  • .m for margin
  • .p for padding
• The side:
  • t for top
  • b for bottom
  • s for start (or left)
  • e for end (or right)
  • b for vertical (both top and bottom)
  • x for horizontal (both left and right)
• The size:
  • 0 for no margin or padding
  • 1 for a margin or padding of 0.25rem
  • 2 for a margin or padding of 0.50rem
  • 3 for a margin or padding of 1.00rem
  • 4 for a margin or padding of 1.50rem
  • 5 for a margin or padding of 3.00rem
  • auto for automatic margin or padding

Below you can see an example how different horizontal (start and end) margins apply to a container, while the padding is set to 3 all-around and the vertical margin is set to 1.

    <div class=class="ms-1 me-4 p-3 my-1">
        .ms-1 .me-4 .my-1 .p-3
    </div>
    <div class=class="ms-2 me-3 p-3 my-1">
        .ms-2 .me-3 .my-1 .p-3
    </div>
    <div class=class="ms-3 me-2 p-3 my-1">
        .ms-3 .me-2 .my-1 .p-3
    </div>
    <div class=class="ms-4 me-1 p-3 my-1">
        .ms-4 .me-1 .my-1 .p-3
    </div>

Below you can see an example how different vertical (top and bottom) margins apply to a container, while the padding is set to 3 all-around and the horizontal margin is set to 1.

    <div class=class="mt-1 mb-4 p-3 mx-1">
        .mt-1 .mb-4
    </div>
    <div class=class="mt-2 mb-3 p-3 mx-1">
        .mt-2 .mb-3
    </div>
    <div class=class="mt-3 mb-2 p-3 mx-1">
        .mt-3 .mb-2
    </div>
    <div class=class="mt-4 mb-1 p-3 mx-1">
        .mt-4 .mb-1
    </div>

Below you can see an example of .mx-auto being used to center a .w-50 container.

    <div class=class="container">
        <div class=class="text-center mx-auto w-50 p-3">
            .mx-auto .w-50 .p-3
        </div>    
    </div>