Margin

Use margin utilities to apply margin to elements through a consistent token-based scale. Every class maps directly to a CSS custom property (--space-xs through --space-xl), so a single variable change in your theme remaps the entire scale at once.

All margin utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Usage

Apply margin utilities directly in your markup using shorthand, axis, or directional classes.

<!-- All sides -->
<div class="m-3">Margin on all sides</div>

<!-- Axis -->
<div class="mx-auto">Centered block</div>
<div class="my-5">Large block-axis margin</div>

<!-- Different on each axis -->
<div class="my-5 mx-2">Vertical rhythm, tight sides</div>

<!-- Directional -->
<div class="mbs-3">Margin block-start</div>
<div class="mbe-3">Margin block-end</div>
<div class="ms-3">Margin start</div>
<div class="me-3">Margin end</div>

<!-- Reset -->
<div class="m-0">No margin</div>

<!-- Center a block -->
<div class="mx-auto" style="max-width: 960px;">Centered container</div>

Shorthand margin

Use m-{n} to apply uniform margin on all four sides in one step.

<div class="m-2">Margin on all sides</div>
<div class="m-3">Margin and padding together</div>

Axis utilities

Control inline and block margin independently without touching the opposite axis.

<!-- Inline -->
<div class="mx-auto">Centered block</div>

<!-- Block -->
<div class="my-5">Large block-axis margin</div>

<!-- Different on each axis -->
<div class="my-5 mx-2">Vertical rhythm, tight sides</div>

Directional utilities

Target a single side when the other sides should remain unaffected.

<div class="mbs-3">Margin block-start</div>
<div class="mbe-3">Margin block-end</div>
<div class="ms-3">Margin start</div>
<div class="me-3">Margin end</div>

Logical properties

FrontAlign's directional spacing utilities are built on CSS logical properties, not physical ones. Instead of top/bottom/left/right, classes map to block/inline start/end:

• mbs-* / mbe-* → margin-block-start / margin-block-end (visually top/bottom in horizontal writing modes)
• ms-* / me-* → margin-inline-start / margin-inline-end (visually left/right, flips automatically with dir="rtl")

This means the same classes work correctly for both LTR languages (English) and RTL languages (Arabic, Hebrew, Persian) without any extra code or directional overrides — set dir="rtl" on your document and ms-*/me-* flip sides automatically.

Browser support is complete: all logical margin and padding properties have been supported in every major browser (Chrome, Firefox, Safari, Edge) for several years.

Why no mt, mb, mr, ml?

If you've used Bootstrap, Tailwind, or most other utility frameworks, you're probably used to typing mt-3 or ml-2 without thinking about it. FrontAlign doesn't ship these classes by default. Here's why, and how to add them back in about thirty seconds if your project genuinely needs them.

The short version

margin-top and margin-bottom are fine. margin-right and margin-left are the problem. All four are physical properties — they describe a side of the screen, not a side of the content. The moment your product supports a right-to-left language, or you reuse a component in a context with a different dir, every ml/mr class becomes a bug waiting to happen: the spacing is on the wrong side, and nothing in the class name tells you that.

margin-inline-start and margin-inline-end (FrontAlign's ms/me) describe the same spacing in terms of reading direction instead of screen geometry. In LTR they behave exactly like ml/mr. In RTL they flip automatically. No dir="rtl" overrides, no duplicate classes, no [dir="rtl"] .ml-3 { margin-right: ... } hacks in your stylesheet.

We extended the same logic to the block axis (mbs/mbe instead of mt/mb) for consistency, even though block-axis flipping only matters for vertical writing modes, which most products never touch. The benefit there is smaller, but having one mental model — block/inline, start/end — instead of two (physical for vertical, logical for horizontal) keeps the system simple to teach and to use correctly.

Why not ship both?

Some frameworks keep mt/mb/ms/me side by side, on the theory that more options can't hurt. In practice, two systems for the same problem create a quiet decision tax: a developer adding a margin now has to know which system the rest of the file uses, and a mixed file (mt-3 next to ms-2) tells a future reader nothing about whether RTL was actually considered, or just half-handled. We'd rather have one system that's correct everywhere than two systems where only one half is correct everywhere.

This is also why we didn't keep mr/ml at all, not even as aliases. An alias that quietly does the wrong thing in RTL is worse than no alias, because it looks like it works until someone ships in Arabic, Hebrew, or Persian and finds out it doesn't.

"But I don't need RTL support"

That's a completely reasonable position, and FrontAlign doesn't force the logical model on you. If your project is genuinely LTR-only and you'd rather type mt-3, you have two supported paths, both of which take a few minutes.

Option 1 — Custom utilities in fa.config.js

FrontAlign's config lets you define your own named classes under classes, mapping any CSS property to a value — including the --space-* tokens, so a custom physical-margin class stays on the same scale as the rest of FrontAlign instead of using new pixel values. This config is read both at build time (to generate static CSS) and at runtime (for dynamic class resolution), so a class you define here works the same way whichever mode your project uses.

// fa.config.js
module.exports = {
  classes: {
    'mt-3': {
      'margin-top': 'var(--space-md)',
    },
    'mb-3': {
      'margin-bottom': 'var(--space-md)',
    },
    'mr-3': {
      'margin-right': 'var(--space-md)',
    },
    'ml-3': {
      'margin-left': 'var(--space-md)',
    },
  },
};

Repeat the pattern for any other steps on the scale you need (--space-xs, --space-sm, --space-lg, --space-xl, --space-2xl), and combine with dark: if a physical-margin class should differ in dark mode:

// fa.config.js
module.exports = {
  classes: {
    'mt-3': {
      'margin-top': 'var(--space-md)',
      dark: {
        'margin-top': 'var(--space-lg)',
      },
    },
  },
};

Option 2 — Plain CSS, no config needed

If you only need a handful of one-off physical-margin classes and don't want to touch the config, write them directly in your own stylesheet, after the FrontAlign import:

@import "frontalign/css";

/* Your own physical-property utilities */
.mt-3 {
  margin-top: var(--space-md);
}
.mr-3 {
  margin-right: var(--space-md);
}

Because these are plain CSS rules referencing the same custom properties, they stay in sync with any theme overrides you make in :root — change --space-md once, and both your logical and physical classes update together.

Which option should you use?

• Use fa.config.js if you want the class defined once and resolved consistently whether your build uses static CSS generation or runtime class resolution, and if you want dark: or other variants attached to it.
• Use plain CSS if you need two or three specific classes and would rather not touch the config at all.

Responsive margin

Every margin class is available at sm:, md:, lg:, xl: breakpoints. FrontAlign follows a mobile-first model — unprefixed classes apply immediately, prefixed classes apply from that breakpoint and above.

<!-- Compact vertical rhythm on mobile, spacious on desktop -->
<div class="my-2 lg:my-5">Responsive margin</div>

<!-- Center only on wider screens -->
<div class="md:mx-auto">Conditionally centered</div>

<!-- Remove margin at a specific breakpoint -->
<div class="m-4 xl:m-0">Reset at xl</div>

Change Sizes

By default, FrontAlign has a modern, standard spacing measurement. However, you can easily change the default spacing values to suit your project's requirements. To do this, in fa.config.js or in your own CSS file, write the following:

Scale reference

Exact pixel values depend on your theme configuration. Override any token in :root to remap the entire scale at once.

In fa.config.js

you just need to write code like the following.

export default {
  theme: {
    spaceXs: '0.25rem',
    spaceSm: '0.5rem',
    spaceMd: '1rem',
    spaceLg: '1.5rem',
    spaceXl: '2rem',
    space2xl: '3rem'
  }
}

Custom CSS

The second way is to do this from your own CSS file, but we recommend doing it with fa.config.js. However, just in case, it's worth adding !important.

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

Margin class reference

Responsive prefix reference

Usage notes

• Use m-{n} for uniform margin; prefer axis or directional classes when only one or two sides need adjustment.
• Use mx-auto with a max-width to center a container without magic numbers.
• Use m-0 to reset margin on all sides; combine with p-0 if you also need to reset padding.
• Combine axis and directional classes freely — for example, mbs-4 lg:mbs-0 to remove block-start margin on desktop.
• Keep mobile margin as the base state and enhance with sm:, md:, lg:, xl: prefixes.
• Override the spacing scale globally by redefining the CSS custom properties in :root — all classes update automatically.
• Do not use margin utilities to create layout structure. Use Flexbox, Grid, and gap utilities for that purpose.