[css] Negative Margins(음수 마진)

종찬 강사님의 특강 강의를 듣고 작성된 글입니다.

https://www.youtube.com/watch?v=OVaKTdFe5Bk

 

이번 종찬강사님의 특강을 듣고 알게된 Negative Margins 에 대한 포스팅을 남기려 합니다.

평소 양수로만  margin을 써왔던 저로선  굉장히 낮선 단어 조합이었습니다. 음수 마진은 대체 언제 쓰이며 어떤 특징을 가지고 있을까?

 

 

요소에 음수 마진(margin-left)을 주게 되면 아래그림 처럼 요소가 끌어 당겨지는것을 볼 수 있습니다. 

• 음수 마진의 사용은 오류가 아니며 W3C에서도 "마진 속성에 음수 값이 허용됩니다"라고 표기 돼있다.
• 보여지는것에 비해 차지하고 있는 공간이 다르다
• float가 적용되면 다르게 반응한다

margin-left: -100px

음수 마진은  top / left 와 bottom / right 가 다르게 작동된다. 

• top / left : 지정된 방향으로 요소를 당김
• bottom / right: 요소를 이동시키 않고 다음에 오는 요소를 끌어당김