[CSS] Negative margin (음수 마진)

Negative Margin (음수 마진)

1. static인 경우

static 음수 margin

1. top, left에 음수 마진을 적용한 경우 

See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen.

 

top 또는 left 방향으로 해당 요소가 이동한다

첫번째 요소에 margin-top: -50px를 하면 두번째, 세번째 요소도 함께 top 방향으로 50px만큼 이동한다

 

2. right, bottom에 음수 마진을 적용한 경우

See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen.

 

다음 요소를 right 또는 bottom만큼 이동시킨다.

즉, 해당 요소와 다음 요소가 겹치게 된다

첫번째(top에 음수마진)과는 달리 첫번째 div요소의 높이가 50px만큼 줄었는데 이는 첫번째 div요소가 두번째 div요소를 50px만큼 끌어당겼기 때문이다

 

2. float인 경우

해당 요소의 다음 요소(float이 적용되지 않은 요소)는 float 요소의 존재를 인식하지 못하고 자신의 상자 영역을 확보한다.

하지만 그렇다고해서 float이 적용된 요소의 영역은 침범하지 않습니다.

 

1. top, left에 음수 마진을 적용한 경우 

See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen.

 

첫번째 div에 float를 적용하면 해당 박스는 위로 뜨게 된다. 

첫번째 div가 뜨게 되므로 두번째 div는 첫번째 div아래로 겹치게 된다

 

빨간색 박스 float:left

위 그림으로 보면 첫번째 div는 빨간색 박스에 해당하고 두번째 div는 초록색 박스에 해당한다.

첫번째 div가 float:left로 뜨게 되었으니 두번째 div는 첫번째 div 아래에 깔리게 된다.

 

🖐 위의 내용이 잘 이해가 안간다면? 
https://min-kyung.tistory.com/80 이 포스팅을 참고해주세요!

 

margin-top: -50px을 적용하면 박스가 떠있는채로 top방향으로 50px 이동한다.

 

2. right, bottom에 음수 마진을 적용한 경우

See the Pen Untitled by Minkyung Shin (@minkyung00) on CodePen.

 

1번과 동일하게 첫번째 div에 float를 적용하면 해당 박스는 위로 뜨게 되고 두번째 div는 첫번째 div아래로 겹치게 된다

margin-bottom: -50px을 적용하면 두번째 div가 50px만큼 끌어당겨진다

---

정리

1. static인 경우
   1. top, left의 경우
      • 해당 요소가 top, left방향으로 움직인다
   2. bottom, right의 경우
      • 아래 요소가 bottom, right 방향으로 움직인다
2. float인 경우
   1.  top, left의 경우
      • 해당 요소가 위로 뜨게 되고, 해당 요소가 top, left방향으로 움직인다
   2. bottom, right의 경우
      • 해당 요소가 위로 뜨게 되고, 다음 요소가 bottom, right 방향으로 움직인다