margin... 왜 그러는거야
우리는 요소 사이에 간격을 주고 싶을 때, margin 값을 줍니다. 서로 떨어지기를 바라는 마음이죠. 하지만 우리가 생각했던 대로 요소들이 떨어지지 않을 때가 있습니다. 그때 우리에겐 혼란이 찾아오죠... "왜 내가 생각한 것 대로 안 떨어지지...?"
우리는 이제 구글에 "margin이 안떨어져요." "margin no apply"... 등등을 검색합니다... 그리고 알게 되죠 이게 바로 그 말로만 듣던 마진 겹침 현상(margin collapsing)이라는 걸...!
마진 겹침 현상(margin collapsing)
마진 겹침 현상은 요소와 요소 사이에 margin-top 또는 margin-bottom이 겹칠 경우 더 높은 값의 margin 값이 적용되는 현상으로 부모요소와 자식요소 사이에서도 발생합니다. 이 경우 자식요소의 margin-top 또는 margin-bottom 값이 부모요소의 높이에 영향을 미치지않고 부모영역을 넘어서는 결과를 보게 됩니다.
위의 예시에서 주황색 상자 사이는 40px이 떨어져야하고, 회색상자와 주황색상자 닿는 곳은 20px이 떨어져야하는데 사라졌네요. 이게 바로 마진 겹친 현상입니다.
근데 왜 margin은 왜 이러는 건가요?
margin은 우리가 "div를 margin을 20px 떨어지게 해줘"라는 말을 들었을 때 이렇게 생각합니다.
div가 다른 요소랑 간격을 20px 떨어져보이게 해주라구? OK
이렇게 우린 각 div가 20px의 무형의 테두리가 생겨지길 원했지만, div가 요소와 만나게 되면 20px 간격이 생기는 되는 결과를 보게 됩니다.
그렇다면 왜 margin은 우리랑 생각한 것과 다르게 나올까요? 그것은 CSS가 안정적인 결과를 보여주기 위해서 위아래가 겹쳐지는 부분은 알아서 가장 높은 값으로 처리해버려서 그렇습니다. 요소의 사이가 적절한 간격을 가지고 떨어져 있으면 시각적으로 보다 안정적인 모습이 되기때문에 CSS는 우릴 위해 이렇게 해준겁니다.(근데 왜 나는 고통스러운가...)
해결해봅시다!
가장 안정적으로 보이는 방법 2가지입니다.
부모 요소에 overflow: hidden
부모 요소에 overflow: hidden을 주면 자식 요소가 부모 요소 범위 밖으로 나가지 못하게 됩니다. 품 안의 자식이 되는 것이죠! 부모의 밖으로 나가지 못한 자식요소는 부모 요소 안에서만 있게 됩니다.
부모 요소에 display: inline-block
부모 요소가 인라인과 블럭 두가지 특징을 가지게 되면서 자식 요소의 마진값을 살릴 수 있게 됩니다.
기타 방법(padding, border, inline-block)
-
첫번째, 부모요소에 padding 값을 주어서 미리 그만큼의 간격을 띄어 놓는 것입니다. 자식요소의 margin이 닿으면 마진겹침현상이 일어나지 않아 간격이 2배가 되므로 이때는 자식의 위아래 margin 값을 0으로 두어야합니다.
-
두번째, 부모 요소에 border 값을 주어 마진 겹친 현상이 일어나지 않게 합니다. 다만 무의미한 border 값이 생길 수 있으므로 잘 사용하지 않습니다.
-
세번째, 자식 요소마다 display: inline-block을 적용합니다. 자식요소가 인라인이 되어 마진 겹친 현상이 일어나지 않지만 자식간의 사이에도 일어나지 않아 그 사이의 간격을 조정해야합니다.
