Margins

css 를 적용할때 쉬워보이면서도 은근 헷갈이는 요놈! 마진! 패딩이랑 헷갈려~ 정확하게 짚고 넘어가자.

margin은 요소를 둘러싸고 있는 공간이다! 패딩이랑 헷갈린다면, 마진을 border(요소의 테두리) 밖의 공간이라고 생각하면 좋다. 패딩은 테두리 안의 공간이다.

margin-top, margin-right, margin-bottom, margin-left 를 값을 margin 속성으로 한 번에 줄 수 있는데 순서에 유의하자.

margin 속성이 값을 4개를 가진다면?

margin : 1px 2px 3px 4px (top / right / bottom / left 순)

margin 속성이 값을 3개만 가진다면?

margin : 1px 2px 3px (top / right and left / bottom 순)

margin 속성이 값을 2개만 가진다면?

margin : 1px 2px (top and bottom / right and left 순)

margin 속성이 값을 1개만 가진다면?

margin : 1px (all four margin applied)

 

margin auto

어떤 요소의 margin 속성을 auto로 준다면 요소의 컨테이너 내 수평으로 중심으로 배치된다. 이는 남아있는 공간을 서로 균등하게 분배하기 때문이다.

 

margin collapse

A요소 바로 밑에 B요소가 있다고 하자. A 요소의 margin-bottom은 40px이고 B요소의 margin-top은 10px이다. 그럼 두 요소의 상하 간격은 50px이 될거라고 예측해보지만! 이런 경우 상하 마진은 덮어 씌워지는 특성이 있다. 그래서 A요소의 margin-bottom 40px로 덮어씌워진다.