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)content_paste
示例
<!-- 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>content_paste
Flex 附加功能
启用后（通过 quasar.config 文件 > 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（顶部） | 无 | 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（右） | 无 | 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（底部） | 无 | 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（左） | 无 | 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（所有） | 无 | 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（左和右） | 无 | 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（上和下） | 无 | 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（顶部） | 无 | 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（顶部） | 自动 | q-mt-auto |
q- | m（边距） | r（右） | 无 | 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（右） | 自动 | q-mr-auto |
q- | m（边距） | b（底部） | 无 | 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（底部） | 自动 | q-mb-auto |
q- | m（边距） | l（左） | 无 | 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（左） | 自动 | q-ml-auto |
q- | m（边距） | a（所有） | 无 | 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（左和右） | 无 | 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（左和右） | 自动 | q-mx-auto |
q- | m（边距） | y（上和下） | 无 | 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（上和下） | 自动 | q-my-auto |
提示
查看有关 Flex 附加功能 的更多详细信息。
其他相关
| 类名 | 描述 |
|---|---|
no-margin | 移除任何应用的边距 |
no-padding | 移除任何应用的填充 |