Spacing (Margins and Paddings)

Codebase decoration utilities for margins and paddings have been set according to a “soft” 0.5rem element grid.

Margins and paddings utility class prefixes:

X-Axis Auto Pushing

.mx-auto / .mr-auto / .ml-auto

These class applies margin-right: auto and/or margin-left: auto to push an item away from siblings or wrapper walls.

If you use .mx (that’s for margings on the x-axis), this push will happen equally from the left and right – resulting in your element being centered, provising that its width is smaller than the width of its wrapper.

Example:

<div class="mb-3 b-dashed">
  <div class="mx-auto bg-color-background-alt" style="width:65%;">.mx-auto</div>
</div>

Block Padding

Table cells (th and td), menu-item hyperlinks and tab labels all have the same “block padding” built into them: padding: 0.5rem 1rem;.

This same block padding is available in the utility class .p-block:

(Buttons also appear to have this same block padding but they do not. The height of the default button comes entirely from its line-height.)

Extra Line Spacing

You may sometimes need to add extra spacing above or below an element equivalent to the spacing between paragraphs (i.e. one line height, or 1.5rem) or two lines (3rem).

This can be done by top or bottoms margin or padding, using the element grid suffix -3 or -6:

As margins:

As paddings:

Responsive Y-Axis Spacing

For adding extra vertical “negative space” (a.k.a. “white space”, though it can be any color, of course), but an amount that will be automatically smaller on phones and larger on larger screens. Expands from 48px (3rem, or 2× normal line height) to 120px (7.5rem, or 5× normal line height).

Useful e.g. for designing homepages and landing pages.

• As margins: .mt-responsive / .mb-responsive / .my-responsive
• As paddings: .pt-responsive / .pb-responsive / .py-responsive

Examples:

If you are on a large device, you see the examples above “work” by making the browser window narrower.