Quasar Spacing Classes: q-pa-md, q-mt-lg and More

Quasar spacing classes look like a wall of abbreviations until you see that they are one short grammar. q-pa-md, q-mt-lg and q-px-xl are all built the same way: a prefix, a type, a side and a size. Learn the four parts and you can write any of the 90 core spacing classes without looking them up. This post goes through the grammar, the pixel values behind each size, the auto margins, and how to get spacing that changes per breakpoint.

To see each class applied, open the new Spacing & Typography Classes tool. It is free, runs in the browser, and copies a class with one click.

The Quasar spacing classes grammar

Every spacing class reads q-[type][side]-[size]:

q-[p|m][t|r|b|l|a|x|y]-[none|auto|xs|sm|md|lg|xl]

So q-pa-md is padding on all sides at the medium size. q-mt-lg is a large top margin. q-px-xl is extra large padding on the left and the right. q-mb-none removes the bottom margin, which is handy on a heading or a <p> that comes with a default margin.

You can stack as many as you need on one element:

<q-card flat bordered class="q-pa-lg q-mb-md">
  <div class="text-h6 q-mb-sm">Billing</div>
  <p class="q-mb-none">Your next invoice is due on the 1st.</p>
</q-card>

q-pa-md and the rest: the pixel values

The sizes are multiples of one Sass variable, $space-base, which is 16px by default. In Quasar 2.35.2 the scale is:

Note the jump from lg to xl: 24px to 48px. There is no 32px step. If a design asks for 32px, use two classes (q-pt-lg plus a style) or add your own size (see the last section).

The same scale drives the gutter classes. q-gutter-md and q-col-gutter-md are 16px too, because $flex-gutter-md is also $space-base. If you space a grid with gutters, the guide to gutter classes explains why the space goes on the row and not on the columns.

Quasar padding classes vs margin classes

Padding and margin classes look the same but do different jobs.

Padding (q-p*) is space inside an element, between its edge and its content. A background or a border includes it. Use it for the inside of cards, banners, table cells and page bodies.

Margin (q-m*) is space outside an element, between it and its neighbors. Use it to push blocks apart in a stack.

Quasar sets box-sizing: border-box on every element, so padding counts inside an element's width. A col-6 with q-pa-md is still 50% wide. A col-6 with q-ma-md is 50% plus 32px and will wrap. Inside a 12-column row, put margins on an inner element, never on the col-* itself.

A simple rule that keeps pages consistent: pad containers, and give stacked children a bottom margin only. With q-mb-* on every item, you never get two margins meeting between items and you never wonder which one wins.

<q-page class="q-pa-md">
  <section class="q-mb-lg">...</section>
  <section class="q-mb-lg">...</section>
  <section>...</section>
</q-page>

Auto margins: q-ml-auto, q-mx-auto and friends

The auto size only exists for margins, and only on one side, x or y. The core CSS defines six of them: q-mt-auto, q-mr-auto, q-mb-auto, q-ml-auto, q-mx-auto and q-my-auto. There is no q-ma-auto, and no padding class takes auto. (The Quasar docs list auto under q-ml-*, q-mr-* and q-mx-*, but the stylesheet in 2.35.2 also has the top, bottom and y versions.)

Two jobs cover most uses.

Push an item to the end of a flex row. In a row or a q-toolbar, q-ml-auto takes all the free space on the left of an element, so it and everything after it moves to the right:

<div class="row items-center q-pa-sm">
  <div class="text-subtitle1">Projects</div>
  <q-btn class="q-ml-auto" color="primary" unelevated no-caps label="New project" />
</div>

In a column with a fixed height, q-mt-auto does the same thing vertically, for example to pin a "Log out" item to the bottom of a drawer.

Center a block with a width. q-mx-auto sets both side margins to auto. It centers an element that has a width or max-width, the classic page container:

<div class="q-mx-auto q-px-md" style="max-width: 960px">
  ...
</div>

Without a width, a block already fills its parent and q-mx-auto does nothing.

Responsive spacing per breakpoint

The core classes apply at every width. Quasar has breakpoint versions, but they live in the flex addon, which is off by default because it adds a lot of CSS. Turn it on with cssAddon: true:

// quasar.config file (Quasar CLI)
framework: {
  cssAddon: true
}

In a Nuxt app with nuxt-quasar-ui, the same key goes under quasar in nuxt.config.ts. You then get classes with a breakpoint between the side and the size:

q-[p|m][t|r|b|l|a|x|y]-[xs|sm|md|lg|xl]-[size]

Each one applies from that breakpoint up (sm is 600px, md 1024px, lg 1440px, xl 1920px), so you write the small-screen value first and override it as the screen grows:

<q-page class="q-pa-sm q-pa-md-lg">
  <!-- 8px padding on phones and tablets, 24px from 1024px up -->
</q-page>

The addon's auto breakpoint classes cover the left, right and x margins only (q-ml-md-auto, q-mr-md-auto, q-mx-md-auto).

If you would rather not ship the addon, a small class of your own with a media query does the same job for the one place you need it.

Change the scale: $space-base and custom sizes

Because every size multiplies $space-base, one variable changes the whole scale. In a Quasar CLI app, set it in src/css/quasar.variables.scss:

$space-base: 12px;

Now md is 12px, lg 18px and xl 36px, and the gutters follow. $space-x-base and $space-y-base change the horizontal and vertical steps separately if you want tighter vertical rhythm than horizontal.

To add a size instead, the Quasar docs show how to merge a new entry into the $spaces map:

@use 'quasar/src/css/variables' as q;
@use 'sass:map';

$space-xxl: (x: 64px, y: 64px);

$spaces: map.merge(q.$spaces, (xxl: $space-xxl));

That gives you q-pa-xxl, q-mt-xxl and the rest. One trade-off from the same docs page: when the variables file holds anything other than variable declarations (an @use counts), Quasar stops injecting only the variables each style block uses, so Sass compiles more slowly. Keep custom sizes rare.

Common questions about Quasar spacing classes

What is q-pa-md in pixels? 16px of padding on all four sides, with the default $space-base.

How do I remove the default margin from a heading? Add q-mt-none or q-my-none. Quasar styles h1 to h6 but leaves the browser's default margins on them.

Is there a class to reset all padding or margin? no-padding and no-margin. Both use !important, so they win over any q-p* or q-m* class on the same element.

Why doesn't q-mx-auto center my button? A q-btn is an inline-flex element, and auto margins don't center inline-level elements. Put it in a parent with row justify-center or text-center instead.

Next step

Open the Spacing & Typography Classes tool and build a class from its three parts: pick padding or margin, a side and a size, and the preview shows the space it adds with the CSS behind it. Search by class name, property or pixel value ("margin top 24px" finds q-mt-lg), then click to copy.