Margin
Utilities for controlling margin using custom spacing variables.
💡 Tip
The margin classes are designed to provide fluid scaling for all spacing values, ensuring consistency and adaptability in the designs. These classes allow us to maintain harmonious spacing across the components and layouts.
To gain a deeper understanding of how these spacing values are calculated and the principles behind the fluid scaling system, we recommend referring to our dedicated documentation on the Foundation/Fluid Scaling page.
| Class Name | CSS Equivalent |
|---|---|
| .m-none | margin: var(--cds-sys-spacing-none); /* ≈0px*/ |
| .m-b-none | margin-block: var(--cds-sys-spacing-none); /* ≈0px*/ |
| .m-i-none | margin-inline: var(--cds-sys-spacing-none); /* ≈0px*/ |
| .m-bs-none | margin-block-start: var(--cds-sys-spacing-none); /* ≈0px*/ |
| .m-be-none | margin-block-end: var(--cds-sys-spacing-none); /* ≈0px*/ |
| .m-is-none | margin-inline-start: var(--cds-sys-spacing-none); /* ≈0px*/ |
| .m-ie-none | margin-inline-end: var(--cds-sys-spacing-none); /* ≈0px*/ |
| .m-3xs | margin: var(--cds-sys-spacing-3xs); /* ≈4px*/ |
| .m-b-3xs | margin-block: var(--cds-sys-spacing-3xs); /* ≈4px*/ |
| .m-i-3xs | margin-inline: var(--cds-sys-spacing-3xs); /* ≈4px*/ |
| .m-bs-3xs | margin-block-start: var(--cds-sys-spacing-3xs); /* ≈4px*/ |
| .m-be-3xs | margin-block-end: var(--cds-sys-spacing-3xs); /* ≈4px*/ |
| .m-is-3xs | margin-inline-start: var(--cds-sys-spacing-3xs); /* ≈4px*/ |
| .m-ie-3xs | margin-inline-end: var(--cds-sys-spacing-3xs); /* ≈4px*/ |
| .m-2xs | margin: var(--cds-sys-spacing-2xs); /* ≈8px*/ |
| .m-b-2xs | margin-block: var(--cds-sys-spacing-2xs); /* ≈8px*/ |
| .m-i-2xs | margin-inline: var(--cds-sys-spacing-2xs); /* ≈8px*/ |
| .m-bs-2xs | margin-block-start: var(--cds-sys-spacing-2xs); /* ≈8px*/ |
| .m-be-2xs | margin-block-end: var(--cds-sys-spacing-2xs); /* ≈8px*/ |
| .m-is-2xs | margin-inline-start: var(--cds-sys-spacing-2xs); /* ≈8px*/ |
| .m-ie-2xs | margin-inline-end: var(--cds-sys-spacing-2xs); /* ≈8px*/ |
| .m-xs | margin: var(--cds-sys-spacing-xs); /* ≈12px*/ |
| .m-b-xs | margin-block: var(--cds-sys-spacing-xs); /* ≈12px*/ |
| .m-i-xs | margin-inline: var(--cds-sys-spacing-xs); /* ≈12px*/ |
| .m-bs-xs | margin-block-start: var(--cds-sys-spacing-xs); /* ≈12px*/ |
| .m-be-xs | margin-block-end: var(--cds-sys-spacing-xs); /* ≈12px*/ |
| .m-is-xs | margin-inline-start: var(--cds-sys-spacing-xs); /* ≈12px*/ |
| .m-ie-xs | margin-inline-end: var(--cds-sys-spacing-xs); /* ≈12px*/ |
| .m-s | margin: var(--cds-sys-spacing-s); /* ≈16px*/ |
| .m-b-s | margin-block: var(--cds-sys-spacing-s); /* ≈16px*/ |
| .m-i-s | margin-inline: var(--cds-sys-spacing-s); /* ≈16px*/ |
| .m-bs-s | margin-block-start: var(--cds-sys-spacing-s); /* ≈16px*/ |
| .m-be-s | margin-block-end: var(--cds-sys-spacing-s); /* ≈16px*/ |
| .m-is-s | margin-inline-start: var(--cds-sys-spacing-s); /* ≈16px*/ |
| .m-ie-s | margin-inline-end: var(--cds-sys-spacing-s); /* ≈16px*/ |
| .m-m | margin: var(--cds-sys-spacing-m); /* ≈24px*/ |
| .m-b-m | margin-block: var(--cds-sys-spacing-m); /* ≈24px*/ |
| .m-i-m | margin-inline: var(--cds-sys-spacing-m); /* ≈24px*/ |
| .m-bs-m | margin-block-start: var(--cds-sys-spacing-m); /* ≈24px*/ |
| .m-be-m | margin-block-end: var(--cds-sys-spacing-m); /* ≈24px*/ |
| .m-is-m | margin-inline-start: var(--cds-sys-spacing-m); /* ≈24px*/ |
| .m-ie-m | margin-inline-end: var(--cds-sys-spacing-m); /* ≈24px*/ |
| .m-l | margin: var(--cds-sys-spacing-l); /* ≈32px*/ |
| .m-b-l | margin-block: var(--cds-sys-spacing-l); /* ≈32px*/ |
| .m-i-l | margin-inline: var(--cds-sys-spacing-l); /* ≈32px*/ |
| .m-bs-l | margin-block-start: var(--cds-sys-spacing-l); /* ≈32px*/ |
| .m-be-l | margin-block-end: var(--cds-sys-spacing-l); /* ≈32px*/ |
| .m-is-l | margin-inline-start: var(--cds-sys-spacing-l); /* ≈32px*/ |
| .m-ie-l | margin-inline-end: var(--cds-sys-spacing-l); /* ≈32px*/ |
| .m-xl | margin: var(--cds-sys-spacing-xl); /* ≈48px*/ |
| .m-b-xl | margin-block: var(--cds-sys-spacing-xl); /* ≈48px*/ |
| .m-i-xl | margin-inline: var(--cds-sys-spacing-xl); /* ≈48px*/ |
| .m-bs-xl | margin-block-start: var(--cds-sys-spacing-xl); /* ≈48px*/ |
| .m-be-xl | margin-block-end: var(--cds-sys-spacing-xl); /* ≈48px*/ |
| .m-is-xl | margin-inline-start: var(--cds-sys-spacing-xl); /* ≈48px*/ |
| .m-ie-xl | margin-inline-end: var(--cds-sys-spacing-xl); /* ≈48px*/ |
| .m-2xl | margin: var(--cds-sys-spacing-2xl); /* ≈64px*/ |
| .m-b-2xl | margin-block: var(--cds-sys-spacing-2xl); /* ≈64px*/ |
| .m-i-2xl | margin-inline: var(--cds-sys-spacing-2xl); /* ≈64px*/ |
| .m-bs-2xl | margin-block-start: var(--cds-sys-spacing-2xl); /* ≈64px*/ |
| .m-be-2xl | margin-block-end: var(--cds-sys-spacing-2xl); /* ≈64px*/ |
| .m-is-2xl | margin-inline-start: var(--cds-sys-spacing-2xl); /* ≈64px*/ |
| .m-ie-2xl | margin-inline-end: var(--cds-sys-spacing-2xl); /* ≈64px*/ |
| .m-3xl | margin: var(--cds-sys-spacing-3xl); /* ≈96px*/ |
| .m-b-3xl | margin-block: var(--cds-sys-spacing-3xl); /* ≈96px*/ |
| .m-i-3xl | margin-inline: var(--cds-sys-spacing-3xl); /* ≈96px*/ |
| .m-bs-3xl | margin-block-start: var(--cds-sys-spacing-3xl); /* ≈96px*/ |
| .m-be-3xl | margin-block-end: var(--cds-sys-spacing-3xl); /* ≈96px*/ |
| .m-is-3xl | margin-inline-start: var(--cds-sys-spacing-3xl); /* ≈96px*/ |
| .m-ie-3xl | margin-inline-end: var(--cds-sys-spacing-3xl); /* ≈96px*/ |
Add margin to a single side
Control the margin on one side of an element using the p-{b|s}{s|e}-{size} utilities.
| Abbriviation | |
|---|---|
| b | block (default vertical axis) |
| i | inline (default horizontal axis) |
| s | start (top for block, left for inline) |
| e | end (bottom for block, right for inline) |
As an illustration, consider using the class m-bs-m to apply a margin of 1.5rem from the top (block-start) at desktop size. This margin will align with the top side of an element, based on its text direction.
Similarly, the class m-ie-s will add a margin 1rem of margin from the right (inline-end) at desktop size, aligning it with either the right side of the element, depending on its text direction.
💡 Tip
In our development practices, we aim to avoid the use of physical properties such as top, bottom, right, and left. Instead, we advocate for the use of logical properties: {block|inline}-{end|start}. To enhance your understanding of these logical properties, we recommend visiting the Foundation/Logical Properties page.
<div class="[...] m-bs-m">m-bs-m</div>
<div class="[...] m-ie-s">m-ie-s</div>
<div class="[...] m-be-l">m-be-l</div>
<div class="[...] m-is-xs">m-is-xs</div>Add horizontal margin
Control the horizontal margin of an element using the m-i-{size} utilities.
<div class="[...] m-i-l">m-i-l</div>Add vertical margin
Control the vertical margin of an element using the m-b-{size} utilities.
<div class="[...] m-b-l">m-b-l</div>Add margin to all sides
Control the margin on all sides of an element using the m-{size} utilities.
<div class="[...] m-l">m-l</div>Using negative values
To use a negative margin value, prefix the class name with a dash to convert it to a negative value.
<div class="[...] -m-be-l">-m-be-l</div>