Quasar Spacing Classes & Typography Cheat Sheet

Every Quasar padding and margin class, plus the text, font weight and visibility classes, each with its CSS and a live preview. Search a class, see it applied, click to copy.

Spacing class builder
Every spacing class reads q- + type + side + size.
Type
Side
Size
q-pa-md
padding: 16px;
content
144 classes. Click a class name to copy it.
Padding on the top, none (0px)
padding-top: 0;
content
Padding on the top, extra small (4px)
padding-top: 4px;
content
Padding on the top, small (8px)
padding-top: 8px;
content
Padding on the top, medium (16px)
padding-top: 16px;
content
Padding on the top, large (24px)
padding-top: 24px;
content
Padding on the top, extra large (48px)
padding-top: 48px;
content
Padding on the right, none (0px)
padding-right: 0;
content
Padding on the right, extra small (4px)
padding-right: 4px;
content
Padding on the right, small (8px)
padding-right: 8px;
content
Padding on the right, medium (16px)
padding-right: 16px;
content
Padding on the right, large (24px)
padding-right: 24px;
content
Padding on the right, extra large (48px)
padding-right: 48px;
content
Padding on the bottom, none (0px)
padding-bottom: 0;
content
Padding on the bottom, extra small (4px)
padding-bottom: 4px;
content
Padding on the bottom, small (8px)
padding-bottom: 8px;
content
Padding on the bottom, medium (16px)
padding-bottom: 16px;
content
Padding on the bottom, large (24px)
padding-bottom: 24px;
content
Padding on the bottom, extra large (48px)
padding-bottom: 48px;
content
Padding on the left, none (0px)
padding-left: 0;
content
Padding on the left, extra small (4px)
padding-left: 4px;
content
Padding on the left, small (8px)
padding-left: 8px;
content
Padding on the left, medium (16px)
padding-left: 16px;
content
Padding on the left, large (24px)
padding-left: 24px;
content
Padding on the left, extra large (48px)
padding-left: 48px;
content
Padding on all sides, none (0px)
padding: 0;
content
Padding on all sides, extra small (4px)
padding: 4px;
content
Padding on all sides, small (8px)
padding: 8px;
content
Padding on all sides, medium (16px)
padding: 16px;
content
Padding on all sides, large (24px)
padding: 24px;
content
Padding on all sides, extra large (48px)
padding: 48px;
content
Padding on the left and right, none (0px)
padding-left: 0; padding-right: 0;
content
Padding on the left and right, extra small (4px)
padding-left: 4px; padding-right: 4px;
content
Padding on the left and right, small (8px)
padding-left: 8px; padding-right: 8px;
content
Padding on the left and right, medium (16px)
padding-left: 16px; padding-right: 16px;
content
Padding on the left and right, large (24px)
padding-left: 24px; padding-right: 24px;
content
Padding on the left and right, extra large (48px)
padding-left: 48px; padding-right: 48px;
content
Padding on the top and bottom, none (0px)
padding-top: 0; padding-bottom: 0;
content
Padding on the top and bottom, extra small (4px)
padding-top: 4px; padding-bottom: 4px;
content
Padding on the top and bottom, small (8px)
padding-top: 8px; padding-bottom: 8px;
content
Padding on the top and bottom, medium (16px)
padding-top: 16px; padding-bottom: 16px;
content

How to use the Spacing & Typography Classes

  1. Build a spacing class: pick p for padding or m for margin, then a side, then a size. The preview shows the space it adds and the CSS it sets.
  2. Or search the full list by class name, CSS property, size or pixel value, and narrow it to spacing, typography, font weight, alignment or visibility.
  3. Click a class name to copy it, then add it to the class attribute of any element or Quasar component in your template.
  4. Combine classes freely: class="q-pa-md q-mb-lg text-h6 text-weight-bold" pads a block, spaces it from the next one and styles its text.

To change the fonts and the look of these classes for a whole app, try the free Theme Builder.

Frequently asked questions