CSS Spacing Classes

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)

예시

<!-- 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

quasar.config file > framework > cssAddon: true를 활성화 하면 breakpoint point를 인식하게 됩니다.

클래스 형식

.q-(p|m)(t|r|b|l|a|x|y)-<bp>-(none|auto|xs|sm|md|lg|xl)
<bp>는 브레이크포인트를 의미하며, xs, sm, md, lg, xl 등으로 지정할 수 있습니다.

예시

• q-pa-xs-md: 모든 방향(margin all)에 대해 md 크기의 패딩을 xs 브레이크포인트 이상의 화면에서 적용합니다.
• q-pa-sm-sm: 모든 방향(margin all)에 대해 sm 크기의 패딩을 sm 브레이크포인트 이상의 화면에서 적용합니다.
• q-px-md-lg: 가로축(x-axis)에 대해 lg 크기의 패딩을 md 브레이크포인트 이상의 화면에서 적용합니다.
• q-py-md-md: 세로축(y-axis)에 대해 md 크기의 패딩을 md 브레이크포인트 이상의 화면에서 적용합니다

주의사항

cssAddon을 활성화하면 CSS 파일의 크기가 눈에 띄게 증가합니다. 따라서 반드시 필요한 경우에만 이 기능을 활성화하는 것이 좋습니다. CSS 파일의 크기가 증가하면 페이지 로딩 속도에 영향을 줄 수 있기 때문에, 성능과 필요성을 균형 있게 고려하여 결정해야 합니다

Table

Prefix	Type	Direction	Size	Example
q-	p (padding)	t (top)	none	q-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)	none	q-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)	none	q-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)	none	q-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)	none	q-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)	none	q-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)	none	q-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)	none	q-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)	auto	q-mt-auto
q-	m (margin)	r (right)	none	q-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)	auto	q-mr-auto
q-	m (margin)	b (bottom)	none	q-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)	auto	q-mb-auto
q-	m (margin)	l (left)	none	q-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)	auto	q-ml-auto
q-	m (margin)	a (all)	none	q-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)	none	q-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)	auto	q-mx-auto
q-	m (margin)	y (top & bottom)	none	q-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)	auto	q-my-auto

그외

no-margin
no-padding