Looking forQuasar v2 beta(Vue 3) docs?

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)t (top)autoq-mt-auto (v1.9.12+)
q-m (margin)r (right)noneq-mr-none
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)r (right)autoq-mr-auto
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)b (bottom)autoq-mb-auto (v1.9.12+)
q-m (margin)l (left)noneq-ml-none
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)l (left)autoq-ml-auto
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)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)x (left & right)autoq-mx-auto
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
q-m (margin)y (top & bottom)autoq-my-auto (v1.9.12+)

TIP

See more details about the Flex Addons.

Class NameDescription
no-marginRemoves any applied margins
no-paddingRemoves any applied padding