요약
Stack 레이아웃 예시
<h1>과<p>태그 사이에 기본적으로 큰 간격이 있음.stack클래스를 사용하여 간격을 줄일 수 있지만, 여전히 간격이 존재
.space-* 클래스 시스템
- CSS 변수
--gap을 조정하여 Flexbox나 CSS Grid 레이아웃의 간격을 제어 - 9가지 크기 제공:
.space-0(0),.space-2xs(0.25em),.space-xs(0.5em),.space-s(0.75em),.space-m(1em),.space-l(1.5em),.space-xl(1.75em),.space-2xl(2em),.space-3xl(3em)
사용 예시
<div class="stack space-2xs">
<h1>Acme Anvil Company</h1>
<p>Stop roadrunners in their tracks!</p>
</div>
이 방식으로 제목과 부제목 사이의 간격을 더욱 세밀하게 조정할 수 있습니다.