CSS间距类

Quasar提供了CSS类来帮助您为DOM元素或组件提供间距。 所有选项都以q-为前缀,然后细分为类型(T),方向(D)和大小(S)。 有关所有可能的排列,请参见下表。

语法

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)

例子

<!-- 所有方向小的padding -->
<div class="q-pa-sm">...</div>

<!-- 项部中margin, 右边小margin -->
<q-card class="q-mt-md q-mr-sm">...</q-card>

Flex插件(Addons)

启用后(通过quasar.conf.js > framework > cssAddon: true),它将为所有与间距相关的CSS类提供断点感知版本。

请注意,启用后,CSS占用空间将明显增加。 因此,只有在您确实需要时才这样做。

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

例子: q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md

排列表

前缀类型方向尺寸例子
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

查看有关Flex插件的更多详细信息。