CSS:margin

Negative margins

음수 마진은 문서 내의 정상적인 흐름(document flow) 를 건들이지 않습니다. 다시말해, 요소를 이동하기 위해 음수 마진을 사용하면, 그 뒤에 오는 모든 요소들도 같이 이동하게 됩니다.

floats 이 적용되면 다르게 동작하므로 음수 마진을 사용할 경우에 좀 더 주의를 기울여야 합니다.

float 이 적용된 엘리먼트 다음에 나오는 요소(element)의 행동(동작)은 다음과 같습니다.

float 이 적용된 엘리먼트 다음에 나오는 정상적인 요소(float 이 적용되지 않은 요소)는 float 이 적용된 엘리먼트의 존재를 인식하지 못하고 자신의 상자 영역을 확보합니다.

하지만 float 이 적용된 엘리먼트의 영역은 침범하지 않습니다.

이 점을 이용하여 float 된 요소에 음수 마진을 적용할 수 있는데, float 의 반대 방향으로 음수 마진을 줘서 컨텐츠를 끌어당기는 효과를 나타낼 수 있습니다.