Padding

Use padding utilities to apply padding 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 padding utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Usage

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

<!-- All sides -->
<div class="p-4">Padding on all sides</div>

<!-- Axis -->
<div class="px-4 py-2">Card</div>

<!-- Directional -->
<div class="pbs-4 pbe-4 ps-3 pe-3">Custom padding per side</div>

<!-- Reset -->
<div class="p-0">No padding</div>

Shorthand padding

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

<div class="p-4">Padding on all sides</div>

Axis utilities

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

<!-- Inline -->
<div class="px-4">Wide horizontal padding</div>

<!-- Block -->
<div class="py-2">Compact block-axis padding</div>

<!-- Different on each axis -->
<div class="px-4 py-2">Button-style padding</div>

Directional utilities

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

<div class="pbs-4">Padding block-start</div>
<div class="pbe-4">Padding block-end</div>
<div class="ps-3">Padding start</div>
<div class="pe-3">Padding 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:

• pbs-* / pbe-* → padding-block-start / padding-block-end (visually top/bottom in horizontal writing modes)
• ps-* / pe-* → padding-inline-start / padding-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 ps-*/pe-* 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 pt, pb, pr, pl?

If you've used Bootstrap, Tailwind, or most other utility frameworks, you're probably used to typing pt-3 or pl-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

padding-top and padding-bottom are fine. padding-right and padding-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 pl/pr class becomes a bug waiting to happen: the spacing is on the wrong side, and nothing in the class name tells you that.

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

We extended the same logic to the block axis (pbs/pbe instead of pt/pb) 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 pt/pb/ps/pe 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 padding now has to know which system the rest of the file uses, and a mixed file (pt-3 next to ps-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 pr/pl 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 pt-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-padding 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: {
    'pt-3': {
      'padding-top': 'var(--space-md)',
    },
    'pb-3': {
      'padding-bottom': 'var(--space-md)',
    },
    'pr-3': {
      'padding-right': 'var(--space-md)',
    },
    'pl-3': {
      'padding-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-padding class should differ in dark mode:

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

Option 2 — Plain CSS, no config needed

If you only need a handful of one-off physical-padding 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 */
.pt-3 {
  padding-top: var(--space-md);
}
.pr-3 {
  padding-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 padding

Every padding 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.

<!-- No padding on mobile, scale up at each breakpoint -->
<div class="p-0 md:p-3 lg:p-5">Responsive padding</div>

<!-- Remove spacing at a specific breakpoint -->
<div class="p-4 xl:p-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;

Padding class reference

Responsive prefix reference

Usage notes

• Use p-{n} for uniform padding; prefer axis or directional classes when only one or two sides need adjustment.
• Use p-0 to reset padding on all sides; combine with m-0 if you also need to reset margin.
• Combine axis and directional classes freely — for example, px-4 py-2 for button-style padding.
• Keep mobile padding 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 padding utilities to create layout structure. Use Flexbox, Grid, and gap utilities for that purpose.