Spacing

Spacing follows a fluid scale, meaning that space scales based on the size of the viewport and follows a sizing ratio.

• --c6-size-1: 0.25rem;
• --c6-size-2: 0.5rem;
• --c6-size-3: 1rem;
• --c6-size-4: 1.25rem;
• --c6-size-5: 1.5rem;
• --c6-size-6: 2rem;
• --c6-size-7: 2.5rem;
• --c6-size-8: 3rem;
• --c6-size-9: 4rem;
• --c6-size-10: 5rem;

Responsive margins

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

Margin examples:

Responsive paddings

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

Padding examples:

Spacing extras

Margin x-axis auto

• mx-auto / xxs:mx-auto / xs:mx-auto / sm:mx-auto / md:mx-auto / etc.
• mr-auto / xxs:mr-auto / xs:mr-auto / sm:mr-auto / md:mr-auto / etc.
• ml-auto / xxs:ml-auto / xs:ml-auto / sm:ml-auto / md:ml-auto / etc.

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

For example, ml-auto will push an element to the right, or inline-end.

<div class="ml-auto bg-neutral">ml-auto</div>

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

Example:

<div class="mx-auto bg-neutral" style="inline-size:60%;">mx-auto</div>

Empty line spacing

Add extra spacing above or below an element by top or bottom margin or padding:

As margins:

As paddings: