margin-x
margin-x 속성에 대한 유틸리티입니다.
요소 왼쪽과 오른쪽의 여백 영역(margin area)의 크기를 설정합니다.
| 클래스 | 약어 클래스 | 속성 |
|---|---|---|
margin-x:auto | mx:auto | margin-right: auto !important; margin-left: auto !important; |
margin-x:0 | mx:0 | margin-right: var(--gap-0) !important; /* 0px */ margin-left: var(--gap-0) !important; |
margin-x:1 | mx:1 | margin-right: var(--gap-1) !important; /* 4px */ margin-left: var(--gap-1) !important; |
margin-x:2 | mx:2 | margin-right: var(--gap-2) !important; /* 8px */ margin-left: var(--gap-2) !important; |
margin-x:3 | mx:3 | margin-right: var(--gap-3) !important; /* 12px */ margin-left: var(--gap-3) !important; |
margin-x:4 | mx:4 | margin-right: var(--gap-4) !important; /* 16px */ margin-left: var(--gap-4) !important; |
margin-x:5 | mx:5 | margin-right: var(--gap-5) !important; /* 20px */ margin-left: var(--gap-5) !important; |
margin-x:6 | mx:6 | margin-right: var(--gap-6) !important; /* 24px */ margin-left: var(--gap-6) !important; |
margin-x:7 | mx:7 | margin-right: var(--gap-7) !important; /* 28px */ margin-left: var(--gap-7) !important; |
margin-x:8 | mx:8 | margin-right: var(--gap-8) !important; /* 32px */ margin-left: var(--gap-8) !important; |
margin-x:9 | mx:9 | margin-right: var(--gap-9) !important; /* 36px */ margin-left: var(--gap-9) !important; |
margin-x:10 | mx:10 | margin-right: var(--gap-10) !important; /* 40px */ margin-left: var(--gap-10) !important; |
기본 여백 크기 var(--gap) 설정과 관련된 내용은 여기를 참고해주세요.