Spacing

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

Element grid measure	Utility class suffix
0.5rem	-1
1rem	-2
1.5rem	-3
2rem	-4
2.5rem	-5
3rem	-6

Responsive margins

• Margins all: m- / xs:m- / sm:m- / md:m- / lg:m-
• Margin top: mt- / xs:mt- / sm:mt- / md:mt- / lg:mt-
• Margin right: mr- / xs:mr- / sm:mr- / md:mr- / lg:mr-
• Margin bottom: mb- / xs:mb- / sm:mb- / md:mb- / lg:mb-
• Margin left: ml- / xs:ml- / sm:ml- / md:ml- / lg:ml-
• Margins top and bottom: my- / xs:my- / sm:my- / md:my- / lg:my-
• Margins left and right: mx- / xs:mx- / sm:mx- / md:mx- / lg:mx-

That makes 210 margin utilities. Plus a few extras below.

Margin examples:

Responsive paddings

• Paddings all: p- / xs:p- / sm:p- / md:p- / lg:p-
• Padding top: pt- / xs:pt- / sm:pt- / md:pt- / lg:pt-
• Padding right: pr- / xs:pr- / sm:pr- / md:pr- / lg:pr-
• Padding bottom: pb- / xs:pb- / sm:pb- / md:pb- / lg:pb-
• Padding left: pl- / xs:pl- / sm:pl- / md:pl- / lg:pl-
• Paddings top and bottom: py- / xs:py- / sm:py- / md:py- / lg:py-
• Paddings left and right: px- / xs:px- / sm:px- / md:px- / lg:px-

That makes 210 padding utilities. Plus one extra below.

Padding examples:

Spacing extras

Margin x-axis auto

• mx-auto / xs:mx-auto / sm:mx-auto / md:mx-auto / lg:mx-auto
• mr-auto / xs:mr-auto / sm:mr-auto / md:mr-auto / lg:mr-auto
• ml-auto / xs:ml-auto / sm:ml-auto / md:ml-auto / lg:ml-auto

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

For example, ml-auto will push an element to the right

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

Example:

<div class="mx-auto bg-gray-100" style="width:60%;">mx-auto</div>

Responsive spacing example

Example of responsive borders and spacing (i.e. margins and paddings) in a responsive grid:

<div class="my-6 grid xs:equal-2-cols lg:equal-4-cols b-thick xs:b-0 px-2 xs:px-0 xs:t-center">
  <div class="bb-thin xs:br-thin lg:bb-thick py-2 md:p-4 lg:py-6">Item one</div>
  <div class="bb-thin lg:br-thin lg:bb-thick py-2 md:p-4 lg:py-6">Item two</div>
  <div class="bb-thin xs:bb-thick xs:br-thin py-2 md:p-4 lg:py-6">Item three</div>
  <div class="bb-thick py-2 md:p-4 lg:py-6">Item four</div>
  <div class="bb-thin xs:br-thin lg:bb-0 py-2 md:p-4 lg:py-6">Item five</div>
  <div class="bb-thin lg:br-thin lg:bb-0 py-2 md:p-4 lg:py-6">Item six</div>
  <div class="bb-thin xs:br-thin xs:bb-0 py-2 md:p-4 lg:py-6">Item seven</div>
  <div class="py-2 md:p-4 lg:py-6">Item eight</div>
</div>

Cell padding

Table cells (th and td) and buttons have the same “cell padding” built into them: padding: 0.5rem 1rem. This same cell padding is available in the utility class p-cell (this also has an alias p-block):

You can use p-cell as a quick way of setting up menus, cards, tab panels, etc.

Empty 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: