마진의 역할
마진은 요소의 위치를 변경하는 역할도 하지만, 사실
요소 간의 간격(gap)을 조정하는 역할을 주로 한다.
음수 마진 값(negative margin)
그래서 음수로 마진을 주면 요소를 부모 밖으로 튀어나오게 하거나(부모와 자신의 간격 조정) 형제 요소의 위치를 변경(ex)자기 바로 아래에 있는 형제 요소를 음수 margin-bottom으로 자기 쪽으로 끌어옴)할 수 있다.
- fieldset처럼 제목 요소가 부모 밖으로(위쪽으로) 조금 튀어나오는 예쁜 레이아웃 만들 수 있다
- 전체적으로 양 옆에 패딩이 있는 컨테이너 만들 때(간편하게 카드라고 부르자) 음수 margin을 이용하면 카드 안에 있는 특정 이미지만 양 옆으로 모든 공간을 차지하게(회사 랜딩페이지 캐러셀 만들었을 때처럼!) 할 수 있다. 회사에서 캐러셀 만들 때 이런 작업을 했었는데 그땐 음수 margin이란 걸 몰라서 컨테이너에서 padding값을 없애고 😭 더 작은 단위로 wrapper를 또 만들어서 wrapper마다 똑같은 padding을 지정하고 사진이 담긴 wrapper에만 padding을 주지 않았다. 음수 margin을 사용하면 wrapper로 이미지를 감싸고 그 wrapper에 음수 margin을 줘서 간단하게 할 수 있구나! 😆
margin에 auto 값을 주면
남은 공간의 최대치만큼을 마진으로 채운다. 그래서 margin-left와 right에 auto를 주면 요소가 가운데 정렬이 되는 것이다.
(width 값을 명시적으로 지정해 줬을 때만 이렇게 가운데 정렬이 된다. 블록 요소는 남은 수평 공간을 채우려고 계속 가로로 늘어나므로.)
✨