여러 Margin 사이의 충돌

여러 Margin 사이의 충돌

CSS에서는 2더하기 2가 반드시 4가 되지는 않는다. 하나의 엘리먼트의 아래 여백이 다른 엘리먼트의 위 여백에 맞 닿을 경우, 좀 기괴한 계산에 직면할 수 있다. 두 여백을 합산하는 것이 아니라, 웹브라우저는 두 여백 중에서 더 큰 것을 적용한다. 비순차목록의 아래여백이 30px 로 지정되고, 목록 다음에 오는 단락의 위 여백이 20px 로 지정된 것으로 가정하자. 목록과 단락 사이에는 두 값을 더해서 50px 의 공간이 생기는 것이 아니라, 웹브라우저는 가장 큰 margin 값을 사용하므로 이경우에는 30px의 공간이 생긴다. 이렇게 되는 것이 싫다면, top 이나 bottom 둘중하나를 padding 으로 대체한다.

하나의 엘리먼트가 다른 엘리먼트 안에 있을 경우 훨씬 기괴한 상황이 연출된다. 예를 들어, 페이지에 "주의" 박스를 넣는 다고 가정하자. 사전 경고 메시지를 담고 있는 <div> 태그 같은 것이다. 상단과 하단에 20px의 margin 을 넣어서 "주의" 박스를 그 위 제목과 아래 텍스트 단락으로부터 떨어뜨린다. 여기까지는 좋다.

하지만 "주의" 박스 안에 제목을 넣고, 제목과 <div> 의 위/아래 사이에 공간을 약간 주려고 제목 margin 을 10 px로 지정했다면? 아마 제목과 <div> 의 위/아래 사이에 10px 씩의 공간을 넣은 것이라고 생각할지도 모르겠지만,그렇지 않다. 예상과 달리, margin 은 <div> 위에 생기게 된다. 여기서 제목에 적용한 margin 의 크기는 상관이 없다. 크기가 크건 작건 margin 은 <div> 위에 나타나게 된다.

이 문제를 바로잡는 두 가지 방법이 있다 <div> 태그 둘레에 소량의 padding 을 넣거나, <div> 태그에 테두리를 주는 방법이다. Border 와 padding 이 두 margin 사이에 있기 때문에 margin 들이 서로 접하지 않게 됨으로, 제목에는 약간의 공간이 생긴다

Note : 자식 부모 엘리먼트 간이건, 같은 급의 엘리먼트건 상하, 위아래 마진이 서로 마주할 경우, 두 엘리먼트의 마주하는 마진중 더 큰 마진이 두 엘리먼트 사이에 적용된다. 자식 부모 간이면 부모측에 적용된다. 근데 웃기게도, 양수 margin 끼리는 더 큰 margin 이 적용되지만, 양수 margin 과 음수 margin 이 겹칠경우 예를 들어 margin-bottom:20px 과 margin-top:-10px 의 엘리먼트의 margin 이 서로 접할 경우 10px 의 margin 이 적용된다.