margin

예제

기본 예제

m-<number> 유틸리티를 사용해 엘리먼트의 모든 면에 마진을 조절할 수 있습니다. 예를 들어 m-4와 m-8을 사용해 보세요:

<div class="m-8 ...">m-8</div>

한쪽 면에 마진 추가하기

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>

수평 마진 추가하기

mx-<number> 유틸리티를 사용해 엘리먼트의 수평 마진을 조절할 수 있습니다. 예를 들어 mx-4나 mx-8과 같은 유틸리티를 사용합니다:

<div class="mx-8 ...">mx-8</div>

세로 마진 추가하기

my-<number> 유틸리티를 사용해 엘리먼트의 세로 마진을 조절할 수 있습니다. 예를 들어 my-4와 my-8을 사용할 수 있습니다:

<div class="my-8 ...">my-8</div>

음수 값 사용하기

마진 값을 음수로 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환합니다:

<div class="h-16 w-36 bg-sky-400 opacity-20 ..."></div><div class="-mt-8 bg-sky-300 ...">-mt-8</div>

논리적 속성 사용하기

margin-inline-start와 margin-inline-end 논리적 속성을 설정하려면 ms-<number>와 me-<number> 유틸리티를 사용하세요. 예를 들어 ms-4와 me-8과 같이 사용할 수 있습니다.

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

자식 요소 사이에 간격 추가하기

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>

자식 요소 순서 뒤집기

요소들이 반대 순서로 배치되어 있다면(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>

제한 사항

스페이스 유틸리티는 그룹 내 마지막 항목을 제외한 모든 항목에 마진을 추가하는 단축 기능일 뿐입니다. 그리드, 줄바꿈 레이아웃, 또는 DOM 순서가 아닌 복잡한 커스텀 순서로 자식 엘리먼트가 렌더링되는 상황과 같은 복잡한 경우를 처리하도록 설계되지 않았습니다.

이런 경우에는 가능한 경우 갭 유틸리티를 사용하거나, 부모 엘리먼트에 음수 마진을 적용한 후 모든 자식 엘리먼트에 마진을 추가하는 것이 더 좋습니다.

또한, 스페이스 유틸리티는 디바이드 유틸리티와 함께 사용하도록 설계되지 않았습니다. 이런 경우에는 자식 엘리먼트에 마진/패딩 유틸리티를 추가하는 것을 고려해 보세요.

커스텀 값 사용하기

m-[<value>],mx-[<value>], 그리고 mb-[<value>]와 같은 유틸리티를 사용하세요 margin를 완전히 커스텀한 값으로 설정하려면:

<div class="m-[5px] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 m-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="m-(--my-margin) ...">  <!-- ... --></div>

이는 m-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

접두사 a margin 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="mt-4 md:mt-8 ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

m-<number>,mx-<number>,my-<number>,ms-<number>,me-<number>,mt-<number>,mr-<number>,mb-<number>, and ml-<number> 유틸리티는 --spacing 테마 변수에 의해 결정되며, 이 변수는 여러분의 테마에서 커스텀할 수 있습니다:

@theme {  --spacing: 1px; }

스페이싱 스케일 커스터마이징에 대해 더 알아보려면 테마 변수 문서를 참고하세요.