지나치기 쉬운 CSS 속성 마진병합

일반적으로 알려진 속성값은 어디에서든지 쉽게 접하기 때문에 실수가 없지만 간혹 잘 알려지지 않는 값들이 있습니다. 

이 값을 그냥 지나치기에 스킨수정이나 레이아웃등을 바로 잡기 힘들때가 있습니다. 
그런 것들을 모아봤습니다. 

이번 시간에는 마진병합입니다.

1. 마진 - margin

마진은 한 요소에서 외부의 여백을 말합니다. 여기서 외부란 요소의 테두리(border)를 경계로 바깥을 말합니다.
흔히들 외부 여백을 주기위해 마진을 사용하곤 합니다. 
여기서 우리가 알아두어야 할것은 바로 마진 병합입니다.

블록 속성을 가진 요소들 사이에 수직상의 마진을 가지고 서로 만나는 경우,  이웃한 수직 마진 사이에 병합이 발생합니다.  이때 병합이란 투명한 마진들 사이에 가장 큰 값에 흡수되듯 다른 작은 마진 값들은 무시됩니다.

병합된 마진 계산 = 최대 양의 마진값 + 최소 음의 마진값 

서로 이웃이웃하는 요소들은 마진값을 공유합니다.
또한 자식요소에 까지 그 영향력이 미치고, 자식의 마진 또한 부모요소에 미칩니다. 으욍~~~~햇깔려.....

마진값을 공유하고 영향을 미치는 간단한 예를 한번 보시죠.
예를들어
<!-- div A -->
<div style="background: #CBCBCB; margin-bottom: 10px;">
    <!-- div B --> 
    <div style="border: 3px solid #f00; margin-bottom: 20px;">
        div A (margin-bottom:10px) > DIV B (margin-bottom:20px)
    </div>
</div><!-- //div A -->
<!-- div C -->
<div style="border: 3px solid #00f; margin-top: 5px;">
    div C (margin-top:5px)
</div>
그럼 아래와 같이 나타납니다.

DIV A (margin-bottom:10px) > DIV B (margin-bottom:20px)
DIV C (margin-top:5px)

원래는 마진이 10px 이여야하지만 자식요소(div b)가 더 큰 마진을 갖고있어 결국 큰 마진값(20px)를 사용하게 된다는 겁니다.
배경도 마찬가지 입니다. 자세히 보시면 div b에는 배경을 주지 않았지만 부모요소의 병합으로 위처럼 나옵니다.

아시겠지만 마진은 음수값을 사용할수 있습니다. 그럼 음수값에도 영향을 미치는지?????
영향을 미칩니다.

그럼 양수값과 음수값이 서로 이웃하게 되면 어케 되는지?????? 갑자기 머리 아파오기 시작하네^^

일단 
음수값과의 병합.
<!-- DIV A -->
<div style="background: #cbcbcb; margin-bottom: 5px;">
DIV A (margin:15px;margin-bottom:-5px)
</div>
<!-- DIV B -->
<div style="background: #ddd; margin-top: 10px;">
DIV B (margin:15px;margin-top:-10px)
</div>
이렇게 음수값끼리 서로 이웃하게 되면 -15px가 되는것이 아니라 -5px 값이 10px에 병합되어 결국 -10px 의 값이 됩니다.
DIV A (margin:15px;margin-bottom:-5px)
DIV B (margin:15px;margin-top:-10px)


양수와 음수의 병합.

이것도 마찬가지 입니다.
marign-bottom:10px 를 주고 그 아래 속성에 margin-top:-5px 속성을 주면 서로 합해서 결국은 -5px 값만 나온다는 이야기입니다.

참고글

개    개