CSS Spacing Classes

There are CSS classes supplied by Quasar to help you with spacing for DOM elements or components. All options are prefixed with q- and then broken down into type (T), direction (D), and size (S). See the table below for all possible permutations.

Syntax

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

T - type
  - values: p (padding), m (margin)

D - direction
  - values:
      t (top), r (right), b (bottom), l (left),
      a (all), x (both left & right), y (both top & bottom)

S - size
  - values:
      none,
      auto (ONLY for specific margins: q-ml-*, q-mr-*, q-mx-*),
      xs (extra small),
      sm (small),
      md (medium),
      lg (large),
      xl (extra large)

Examples

<!-- small padding in all directions -->
<div class="q-pa-sm">...</div>

<!-- medium margin to top, small margin to right -->
<q-card class="q-mt-md q-mr-sm">...</q-card>

Flex Addons

When enabled (through quasar.conf.js > framework > cssAddon: true) it provides breakpoint aware versions for all spacing related CSS classes.

Note that there will be a noticeable bump in CSS footprint when enabling it. So only do it if you really need it.

.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)

Examples: q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md

Table of permutations

PrefixTypeDirectionSizeExample
q-p (padding)t (top)noneq-pt-none
q-p (padding)t (top)xs (extra small)q-pt-xs
q-p (padding)t (top)sm (small)q-pt-sm
q-p (padding)t (top)md (medium)q-pt-md
q-p (padding)t (top)lg (large)q-pt-lg
q-p (padding)t (top)xl (extra large)q-pt-xl
q-p (padding)r (right)noneq-pr-none
q-p (padding)r (right)xs (extra small)q-pr-xs
q-p (padding)r (right)sm (small)q-pr-sm
q-p (padding)r (right)md (medium)q-pr-md
q-p (padding)r (right)lg (large)q-pr-lg
q-p (padding)r (right)xl (extra large)q-pr-xl
q-p (padding)b (bottom)noneq-pb-none
q-p (padding)b (bottom)xs (extra small)q-pb-xs
q-p (padding)b (bottom)sm (small)q-pb-sm
q-p (padding)b (bottom)md (medium)q-pb-md
q-p (padding)b (bottom)lg (large)q-pb-lg
q-p (padding)b (bottom)xl (extra large)q-pb-xl
q-p (padding)l (left)noneq-pl-none
q-p (padding)l (left)xs (extra small)q-pl-xs
q-p (padding)l (left)sm (small)q-pl-sm
q-p (padding)l (left)md (medium)q-pl-md
q-p (padding)l (left)lg (large)q-pl-lg
q-p (padding)l (left)xl (extra large)q-pl-xl
q-p (padding)a (all)noneq-pa-none
q-p (padding)a (all)xs (extra small)q-pa-xs
q-p (padding)a (all)sm (small)q-pa-sm
q-p (padding)a (all)md (medium)q-pa-md
q-p (padding)a (all)lg (large)q-pa-lg
q-p (padding)a (all)xl (extra large)q-pa-xl
q-p (padding)x (left & right)noneq-px-none
q-p (padding)x (left & right)xs (extra small)q-px-xs
q-p (padding)x (left & right)sm (small)q-px-sm
q-p (padding)x (left & right)md (medium)q-px-md
q-p (padding)x (left & right)lg (large)q-px-lg
q-p (padding)x (left & right)xl (extra large)q-px-xl
q-p (padding)y (top & bottom)noneq-py-none
q-p (padding)y (top & bottom)xs (extra small)q-py-xs
q-p (padding)y (top & bottom)sm (small)q-py-sm
q-p (padding)y (top & bottom)md (medium)q-py-md
q-p (padding)y (top & bottom)lg (large)q-py-lg
q-p (padding)y (top & bottom)xl (extra large)q-py-xl
q-m (margin)t (top)noneq-mt-none
q-m (margin)t (top)xs (extra small)q-mt-xs
q-m (margin)t (top)sm (small)q-mt-sm
q-m (margin)t (top)md (medium)q-mt-md
q-m (margin)t (top)lg (large)q-mt-lg
q-m (margin)t (top)xl (extra large)q-mt-xl
q-m (margin)r (right)noneq-mr-none
q-m (margin)r (right)autoq-mr-auto
q-m (margin)r (right)xs (extra small)q-mr-xs
q-m (margin)r (right)sm (small)q-mr-sm
q-m (margin)r (right)md (medium)q-mr-md
q-m (margin)r (right)lg (large)q-mr-lg
q-m (margin)r (right)xl (extra large)q-mr-xl
q-m (margin)b (bottom)noneq-mb-none
q-m (margin)b (bottom)xs (extra small)q-mb-xs
q-m (margin)b (bottom)sm (small)q-mb-sm
q-m (margin)b (bottom)md (medium)q-mb-md
q-m (margin)b (bottom)lg (large)q-mb-lg
q-m (margin)b (bottom)xl (extra large)q-mb-xl
q-m (margin)l (left)noneq-ml-none
q-m (margin)l (left)autoq-ml-auto
q-m (margin)l (left)xs (extra small)q-ml-xs
q-m (margin)l (left)sm (small)q-ml-sm
q-m (margin)l (left)md (medium)q-ml-md
q-m (margin)l (left)lg (large)q-ml-lg
q-m (margin)l (left)xl (extra large)q-ml-xl
q-m (margin)a (all)noneq-ma-none
q-m (margin)a (all)xs (extra small)q-ma-xs
q-m (margin)a (all)sm (small)q-ma-sm
q-m (margin)a (all)md (medium)q-ma-md
q-m (margin)a (all)lg (large)q-ma-lg
q-m (margin)a (all)xl (extra large)q-ma-xl
q-m (margin)x (left & right)noneq-mx-none
q-m (margin)x (left & right)autoq-mx-auto
q-m (margin)x (left & right)xs (extra small)q-mx-xs
q-m (margin)x (left & right)sm (small)q-mx-sm
q-m (margin)x (left & right)md (medium)q-mx-md
q-m (margin)x (left & right)lg (large)q-mx-lg
q-m (margin)x (left & right)xl (extra large)q-mx-xl
q-m (margin)y (top & bottom)noneq-my-none
q-m (margin)y (top & bottom)xs (extra small)q-my-xs
q-m (margin)y (top & bottom)sm (small)q-my-sm
q-m (margin)y (top & bottom)md (medium)q-my-md
q-m (margin)y (top & bottom)lg (large)q-my-lg
q-m (margin)y (top & bottom)xl (extra large)q-my-xl

TIP

See more details about the Flex Addons.