Margin
Margin
요소의 바깥 여백인 마진(margin)을 정해주는 유틸리티예요. 네 방향 전체, 한 방향, 가로/세로, 논리적 속성(logical property)까지 다양한 방식으로 마진을 조절할 수 있어요.
출처: 문서
본문
ClassStyles
기본 마진 스케일은 이렇게 구성돼요 (<number>는 --spacing 테마 변수를 곱한 값, px는 1px).
m-<number> margin: calc(var(--spacing) * <number>);
-m-<number> margin: calc(var(--spacing) * -<number>);
m-auto margin: auto;
m-px margin: 1px;
-m-px margin: -1px;
m-(<custom-property>) margin: var(<custom-property>);
m-[<value>] margin: <value>;
mx-<number> margin-inline: calc(var(--spacing) * <number>);
-mx-<number> margin-inline: calc(var(--spacing) * -<number>);
mx-auto margin-inline: auto;
mx-px margin-inline: 1px;
-mx-px margin-inline: -1px;
mx-(<custom-property>) margin-inline: var(<custom-property>);
mx-[<value>] margin-inline: <value>;
my-<number> margin-block: calc(var(--spacing) * <number>);
-my-<number> margin-block: calc(var(--spacing) * -<number>);
my-auto margin-block: auto;
my-px margin-block: 1px;
-my-px margin-block: -1px;
my-(<custom-property>) margin-block: var(<custom-property>);
my-[<value>] margin-block: <value>;
ms-<number> margin-inline-start: calc(var(--spacing) * <number>);
-ms-<number> margin-inline-start: calc(var(--spacing) * -<number>);
ms-auto margin-inline-start: auto;
ms-px margin-inline-start: 1px;
-ms-px margin-inline-start: -1px;
ms-(<custom-property>) margin-inline-start: var(<custom-property>);
ms-[<value>] margin-inline-start: <value>;
me-<number> margin-inline-end: calc(var(--spacing) * <number>);
-me-<number> margin-inline-end: calc(var(--spacing) * -<number>);
me-auto margin-inline-end: auto;
me-px margin-inline-end: 1px;
-me-px margin-inline-end: -1px;
me-(<custom-property>) margin-inline-end: var(<custom-property>);
me-[<value>] margin-inline-end: <value>;
mbs-<number> margin-block-start: calc(var(--spacing) * <number>);
-mbs-<number> margin-block-start: calc(var(--spacing) * -<number>);
mbs-auto margin-block-start: auto;
mbs-px margin-block-start: 1px;
-mbs-px margin-block-start: -1px;
mbs-(<custom-property>) margin-block-start: var(<custom-property>);
mbs-[<value>] margin-block-start: <value>;
mbe-<number> margin-block-end: calc(var(--spacing) * <number>);
-mbe-<number> margin-block-end: calc(var(--spacing) * -<number>);
mbe-auto margin-block-end: auto;
mbe-px margin-block-end: 1px;
-mbe-px margin-block-end: -1px;
mbe-(<custom-property>) margin-block-end: var(<custom-property>);
mbe-[<value>] margin-block-end: <value>;
mt-<number> margin-top: calc(var(--spacing) * <number>);
-mt-<number> margin-top: calc(var(--spacing) * -<number>);
mt-auto margin-top: auto;
mt-px margin-top: 1px;
-mt-px margin-top: -1px;
mt-(<custom-property>) margin-top: var(<custom-property>);
mt-[<value>] margin-top: <value>;
mr-<number> margin-right: calc(var(--spacing) * <number>);
-mr-<number> margin-right: calc(var(--spacing) * -<number>);
mr-auto margin-right: auto;
mr-px margin-right: 1px;
-mr-px margin-right: -1px;
mr-(<custom-property>) margin-right: var(<custom-property>);
mr-[<value>] margin-right: <value>;
mb-<number> margin-bottom: calc(var(--spacing) * <number>);
-mb-<number> margin-bottom: calc(var(--spacing) * -<number>);
mb-auto margin-bottom: auto;
mb-px margin-bottom: 1px;
-mb-px margin-bottom: -1px;
mb-(<custom-property>) margin-bottom: var(<custom-property>);
mb-[<value>] margin-bottom: <value>;
ml-<number> margin-left: calc(var(--spacing) * <number>);
-ml-<number> margin-left: calc(var(--spacing) * -<number>);
ml-auto margin-left: auto;
ml-px margin-left: 1px;
-ml-px margin-left: -1px;
ml-(<custom-property>) margin-left: var(<custom-property>);
ml-[<value>] margin-left: <value>;
space-x-<number> / space-y-<number> 계열은 자식 요소들 사이에 간격을 만드는 단축 유틸리티예요. <number>는 --spacing 스케일에 -space-*는 음수, -px는 1px, -(<custom-property>)는 CSS 변수, -[<value>]는 임의 값을 지원해요. space-x-reverse / space-y-reverse는 순서가 뒤집힌 경우 간격 방향을 보정해요.
예시 (Examples)
기본 예시 (Basic example)
m-<number> 유틸리티를 m-4나 m-8처럼 사용하면 요소의 모든 면에 동일한 마진을 적용해요.
<div class="m-8 ...">m-8</div>
한 면에만 마진 추가하기 (Adding margin to a single side)
mt-<number>, mr-<number>, mb-<number>, ml-<number> 유틸리티를 ml-2, mt-6처럼 사용하면 요소의 한 면에만 마진을 적용해요.
<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>
가로 마진 추가하기 (Adding horizontal margin)
mx-<number> 유틸리티를 mx-4나 mx-8처럼 사용하면 요소의 가로 마진을 제어해요.
<div class="mx-8 ...">mx-8</div>
세로 마진 추가하기 (Adding vertical margin)
my-<number> 유틸리티를 my-4나 my-8처럼 사용하면 요소의 세로 마진을 제어해요.
<div class="my-8 ...">my-8</div>
음수 값 사용하기 (Using negative values)
음수 마진 값을 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환하면 돼요.
<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div>
<div class="-mt-8 bg-sky-300 ...">-mt-8</div>
논리적 속성 사용하기 (Using logical properties)
ms-<number>나 me-<number> 유틸리티를 ms-4, me-8처럼 사용하면 margin-inline-start와 margin-inline-end 논리적 속성을 설정해요.
<div>
<div dir="ltr">
<div class="ms-8 ...">ms-8</div>
<div class="me-8 ...">me-8</div>
</div>
<div dir="rtl">
<div class="ms-8 ...">ms-8</div>
<div class="me-8 ...">me-8</div>
</div>
</div>
mbs-<number>와 mbe-<number> 유틸리티를 사용하면 margin-block-start와 margin-block-end 논리적 속성을 설정할 수 있는데, 이 속성들은 쓰기 모드(writing mode)에 따라 위쪽 또는 아래쪽 면에 매핑돼요.
<div class="mbs-8 ...">mbs-8</div>
자식 사이 간격 추가하기 (Adding space between children)
space-x-<number>나 space-y-<number> 유틸리티를 space-x-4, space-y-8처럼 사용하면 요소들 사이의 간격을 제어할 수 있어요.
<div class="flex space-x-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
자식 순서 뒤집기 (Reversing children order)
요소들이 역순(flex-row-reverse나 flex-col-reverse 사용 등)으로 배치되어 있다면 space-x-reverse나 space-y-reverse 유틸리티를 사용해 각 요소의 올바른 면에 간격이 추가되도록 해야 해요.
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
제한 사항 (Limitations)
space 유틸리티는 사실상 그룹의 마지막 항목을 제외한 모든 항목에 마진을 추가하는 단축어일 뿐이라, 그리드나 줄바꿈되는 레이아웃, 또는 자식들이 자연스러운 DOM 순서가 아닌 복잡한 커스텀 순서로 렌더링되는 상황 같은 복잡한 경우를 처리하도록 설계되지는 않았어요.
그런 상황에서는 가능하면 gap 유틸리티를 사용하거나, 부모에 상응하는 음수 마진을 주면서 모든 요소에 마진을 추가하는 게 더 좋아요.
추가로, space 유틸리티는 divide 유틸리티와 함께 동작하도록 설계되지 않았어요. 그런 상황에서는 대신 자식 요소에 마진/패딩 유틸리티를 직접 추가하는 것을 고려해 보세요.
사용자 정의 값 사용하기 (Using a custom value)
m-[<value>], mx-[<value>], mb-[<value>] 같은 유틸리티를 사용하면 완전히 사용자 정의한 값으로 마진을 정할 수 있어요.
<div class="m-[5px] ...">
<!-- ... -->
</div>
CSS 변수를 사용할 때는 m-(<custom-property>) 문법도 쓸 수 있어요.
<div class="m-(--my-margin) ...">
<!-- ... -->
</div>
이것은 m-[var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 붙여주는 것뿐이에요.
반응형 디자인 (Responsive design)
margin 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.
<div class="mt-4 md:mt-8 ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.
테마 커스터마이징 (Customizing your theme)
m-<number>, mx-<number>, my-<number>, ms-<number>, me-<number>, mbs-<number>, mbe-<number>, mt-<number>, mr-<number>, mb-<number>, ml-<number> 유틸리티는 --spacing 테마 변수에 의해 결정돼요. 이 값은 자신의 테마에서 커스터마이징할 수 있어요.
@theme {
--spacing: 1px;
}
스페이싱 스케일을 커스터마이징하는 방법을 더 알아보려면 theme variable 문서를 확인해 보세요.