margin 과 border 사이의 진한 테두리가 우리가 텍스트나 버튼 등을 넣을 주된 공간.
M : margin
P : padding
하단에 나오는 우측 속성들을 전부 조합해서 사용 가능
예) mb-3 은 margin bottom 1rem 의 크기만큼 띄운다는 의미
mt, mb, ml, mr, pt, pb, pl, pr 등 조합 가능
| t | top |
| b | bottom |
| l | left |
| r | right |
| x | x축 |
| y | y축 |
| 0 | 0 만큼의 크기 (font-size를 16px를 기준으로) |
| 1 | .25rem (4px 크기) |
| 2 | .5rem (8px 크기) |
| 3 | 1rem (16px 크기) |
| 4 | 1.5rem (24px 크기) |
| 5 | 3rem (48px 크기) |
| auto | margin을 자동으로 세팅 |
| n | negative를 의미 (font-size를 16px를 기준으로) |
| n1 | -.25rem (-4px 크기) |
| n2 | -.5rem (-8px 크기) |
| n3 | -1rem (-16px 크기) |
| n4 | -1.5rem (-24px 크기) |
| n5 | -3rem (-48px 크기) |
참조 :
'Web > CSS' 카테고리의 다른 글
| [Bootstrap] 마우스 오버 시 Tooltip 나오게 하는 법 (0) | 2022.10.21 |
|---|---|
| [CSS] 브라우저 Viewport (0) | 2022.10.21 |
