음수 마진에 대해 간략하게 정리해보겠습니다.
margin 속성에 음수 값을 주는 것을 말합니다.
그림에서와 같이 top / right / bottom / left에 음수 값을 줄 수 있습니다. 그런데 top과 left에 음수 값을 주는 것과 right와 bottom에 음수 값을 주는 것에 차이점이 있습니다.
margin-top 혹은 margin-bottom에 음수 값을 주었을 때
See the Pen margin-left: -30px; by 석금용 (@gmyong) on CodePen.
.box1 박스에 margin-left: -30px;을 적용시켰을 때 박스가 왼쪽으로 30px 이동한 것을 볼 수 있습니다. top / left에 음수 마진을 주면, 그 방향으로 요소가 이동하게 됩니다.
margin-right 혹은 margin-bottom에 음수 값을 주었을 때
See the Pen yLeRxEO by 석금용 (@gmyong) on CodePen.
.box1 박스에 margin-right: -30px;을 적용시켰을 때, .box1 박스는 이동하지 않고 .box2가 끌어당겨진 것을 볼 수 있습니다. bottom / right에 음수 마진을 주면, 요소를 오른쪽이나 아래로 이동하는 것이 아니라 이 요소 다음에 오는 요소를 끌어당기게 됩니다.
float 값을 주었을 때
See the Pen bGEmxNO by 석금용 (@gmyong) on CodePen.
float 속성을 적용한 요소에 음수 마진을 주면, 이 요소 다음에 나오는 정상적인 요소(float가 적용되지 않은 요소)는 float가 적용된 요소의 영역을 침범하지 않습니다. 위 코드에서 볼 수 있듯이 .box1 박스가 위에 계속 보이고 .box2 박스가 .box1 박스 밑으로 숨는 것을 볼 수 있습니다.
'CSS' 카테고리의 다른 글
| margin collapse (마진 병합) (0) | 2020.07.21 |
|---|---|
| 웹 접근성을 위한 텍스트 숨김 처리 (0) | 2020.07.17 |
| display: block과 inline 차이 (0) | 2020.07.17 |
| 무조건 Flex와 Grid를 쓰는게 좋은가? (0) | 2020.07.16 |
| float를 clear 하는 방법 (0) | 2020.07.15 |