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 - 类型
- 值：p (内边距), m (外边距)
D - 方向
- 值：
t (上), r (右), b (下), l (左),
a (所有), x (左右), y (上下)
S - 大小
- 值：
none,
auto (仅适用于特定外边距：q-ml-*, q-mr-*, q-mx-*),
xs (超小),
sm (小),
md (中),
lg (大),
xl (超大)content_paste
示例
<!-- 所有方向的小内边距 -->
<div class="q-pa-sm">...</div>
<!-- 上边距中等，右边距小 -->
<q-card class="q-mt-md q-mr-sm">...</q-card>content_paste
Flex 附加功能
当启用时（通过 quasar.config file > framework > cssAddon: true），它为所有与间距相关的 CSS 类提供断点感知版本。
注意：启用后 CSS 文件大小会有明显增加。所以只有在真正需要时才启用它。
.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)content_paste
示例：q-pa-xs-md q-pa-sm-sm q-px-md-lg q-py-md-md
组合表
| 前缀 | 类型 | 方向 | 大小 | 示例 |
|---|---|---|---|---|
q- | p (内边距) | t (上) | none | q-pt-none |
q- | p (内边距) | t (上) | xs (超小) | q-pt-xs |
q- | p (内边距) | t (上) | sm (小) | q-pt-sm |
q- | p (内边距) | t (上) | md (中) | q-pt-md |
q- | p (内边距) | t (上) | lg (大) | q-pt-lg |
q- | p (内边距) | t (上) | xl (超大) | q-pt-xl |
q- | p (内边距) | r (右) | none | q-pr-none |
q- | p (内边距) | r (右) | xs (超小) | q-pr-xs |
q- | p (内边距) | r (右) | sm (小) | q-pr-sm |
q- | p (内边距) | r (右) | md (中) | q-pr-md |
q- | p (内边距) | r (右) | lg (大) | q-pr-lg |
q- | p (内边距) | r (右) | xl (超大) | q-pr-xl |
q- | p (内边距) | b (下) | none | q-pb-none |
q- | p (内边距) | b (下) | xs (超小) | q-pb-xs |
q- | p (内边距) | b (下) | sm (小) | q-pb-sm |
q- | p (内边距) | b (下) | md (中) | q-pb-md |
q- | p (内边距) | b (下) | lg (大) | q-pb-lg |
q- | p (内边距) | b (下) | xl (超大) | q-pb-xl |
q- | p (内边距) | l (左) | none | q-pl-none |
q- | p (内边距) | l (左) | xs (超小) | q-pl-xs |
q- | p (内边距) | l (左) | sm (小) | q-pl-sm |
q- | p (内边距) | l (左) | md (中) | q-pl-md |
q- | p (内边距) | l (左) | lg (大) | q-pl-lg |
q- | p (内边距) | l (左) | xl (超大) | q-pl-xl |
q- | p (内边距) | a (所有) | none | q-pa-none |
q- | p (内边距) | a (所有) | xs (超小) | q-pa-xs |
q- | p (内边距) | a (所有) | sm (小) | q-pa-sm |
q- | p (内边距) | a (所有) | md (中) | q-pa-md |
q- | p (内边距) | a (所有) | lg (大) | q-pa-lg |
q- | p (内边距) | a (所有) | xl (超大) | q-pa-xl |
q- | p (内边距) | x (左右) | none | q-px-none |
q- | p (内边距) | x (左右) | xs (超小) | q-px-xs |
q- | p (内边距) | x (左右) | sm (小) | q-px-sm |
q- | p (内边距) | x (左右) | md (中) | q-px-md |
q- | p (内边距) | x (左右) | lg (大) | q-px-lg |
q- | p (内边距) | x (左右) | xl (超大) | q-px-xl |
q- | p (内边距) | y (上下) | none | q-py-none |
q- | p (内边距) | y (上下) | xs (超小) | q-py-xs |
q- | p (内边距) | y (上下) | sm (小) | q-py-sm |
q- | p (内边距) | y (上下) | md (中) | q-py-md |
q- | p (内边距) | y (上下) | lg (大) | q-py-lg |
q- | p (内边距) | y (上下) | xl (超大) | q-py-xl |
q- | m (外边距) | t (上) | none | q-mt-none |
q- | m (外边距) | t (上) | xs (超小) | q-mt-xs |
q- | m (外边距) | t (上) | sm (小) | q-mt-sm |
q- | m (外边距) | t (上) | md (中) | q-mt-md |
q- | m (外边距) | t (上) | lg (大) | q-mt-lg |
q- | m (外边距) | t (上) | xl (超大) | q-mt-xl |
q- | m (外边距) | t (上) | auto | q-mt-auto |
q- | m (外边距) | r (右) | none | q-mr-none |
q- | m (外边距) | r (右) | xs (超小) | q-mr-xs |
q- | m (外边距) | r (右) | sm (小) | q-mr-sm |
q- | m (外边距) | r (右) | md (中) | q-mr-md |
q- | m (外边距) | r (右) | lg (大) | q-mr-lg |
q- | m (外边距) | r (右) | xl (超大) | q-mr-xl |
q- | m (外边距) | r (右) | auto | q-mr-auto |
q- | m (外边距) | b (下) | none | q-mb-none |
q- | m (外边距) | b (下) | xs (超小) | q-mb-xs |
q- | m (外边距) | b (下) | sm (小) | q-mb-sm |
q- | m (外边距) | b (下) | md (中) | q-mb-md |
q- | m (外边距) | b (下) | lg (大) | q-mb-lg |
q- | m (外边距) | b (下) | xl (超大) | q-mb-xl |
q- | m (外边距) | b (下) | auto | q-mb-auto |
q- | m (外边距) | l (左) | none | q-ml-none |
q- | m (外边距) | l (左) | xs (超小) | q-ml-xs |
q- | m (外边距) | l (左) | sm (小) | q-ml-sm |
q- | m (外边距) | l (左) | md (中) | q-ml-md |
q- | m (外边距) | l (左) | lg (大) | q-ml-lg |
q- | m (外边距) | l (左) | xl (超大) | q-ml-xl |
q- | m (外边距) | l (左) | auto | q-ml-auto |
q- | m (外边距) | a (所有) | none | q-ma-none |
q- | m (外边距) | a (所有) | xs (超小) | q-ma-xs |
q- | m (外边距) | a (所有) | sm (小) | q-ma-sm |
q- | m (外边距) | a (所有) | md (中) | q-ma-md |
q- | m (外边距) | a (所有) | lg (大) | q-ma-lg |
q- | m (外边距) | a (所有) | xl (超大) | q-ma-xl |
q- | m (外边距) | x (左右) | none | q-mx-none |
q- | m (外边距) | x (左右) | xs (超小) | q-mx-xs |
q- | m (外边距) | x (左右) | sm (小) | q-mx-sm |
q- | m (外边距) | x (左右) | md (中) | q-mx-md |
q- | m (外边距) | x (左右) | lg (大) | q-mx-lg |
q- | m (外边距) | x (左右) | xl (超大) | q-mx-xl |
q- | m (外边距) | x (左右) | auto | q-mx-auto |
q- | m (外边距) | y (上下) | none | q-my-none |
q- | m (外边距) | y (上下) | xs (超小) | q-my-xs |
q- | m (外边距) | y (上下) | sm (小) | q-my-sm |
q- | m (外边距) | y (上下) | md (中) | q-my-md |
q- | m (外边距) | y (上下) | lg (大) | q-my-lg |
q- | m (外边距) | y (上下) | xl (超大) | q-my-xl |
q- | m (外边距) | y (上下) | auto | q-my-auto |
TIP
查看 Flex 附加功能 了解更多详情。
其他相关
| 类名 | 描述 |
|---|---|
no-margin | 移除所有应用的外边距 |
no-padding | 移除所有应用的内边距 |