1. 여백 단위 개념
Tailwind의 margin (m-)과 padding (p-)은 spacing scale을 기반으로 동일한 4px(=0.25rem) 단위를 사용한다.
<div class="m-4 ...">m-4 (margin: 1rem)</div>
<div class="p-4 ...">p-4 (padding: 1rem)</div>
💡
m-은 바깥 여백,p-는 안쪽 여백을 의미한다.
2. 방향별 여백 설정
| 방향 | margin 클래스 | padding 클래스 | 설명 |
|---|---|---|---|
| 전체 | m-4 | p-4 | 전체 여백 |
| 상단 | mt-4 | pt-4 | 위쪽(top) 여백 |
| 하단 | mb-4 | pb-4 | 아래쪽(bottom) 여백 |
| 왼쪽 | ml-4 | pl-4 | 왼쪽(left) 여백 |
| 오른쪽 | mr-4 | pr-4 | 오른쪽(right) 여백 |
3. 축 단위 제어(x축/ y축)
<div class="mx-8 my-4 ...">
mx: 좌우 여백 / my: 상하 여백
</div>mx-*->margin-left+margin-rightmy-*->margin-top+margin-bottompx-*,py-*도 같은 규칙으로 동작
4. 음수 여백
<div class="mt-[-20px] ...">음수 여백</div>음수 여백은 margin에만 사용 가능하며
[]안에 직접 수치 입력 가능
5. 반응형 여백 설정
화면 크기에 따라 여백을 다르게 줄 수 있다.
<div class="p-2 md:p-8 lg:p-12 ...">반응형 여백</div>작은 화면에서는 좁게, 큰 화면에서는 넓게 설정할때 유용
6. 자동 여백
<div class="mx-auto w-1/2 bg-blue-300">가운데 정렬</div>mx-auto는 좌우 여백을 자동으로 설정하여 부모 요소 안에서 중앙 배치된다.
7. 커스텀 여백 값
<div class="p-[10px] m-[2rem]">직접 입력</div>
이게 왜 안되지? 이게 왜 되지?