CSS margin 겹침현상

마진(margin)이란?

요소의 네 방향 바깥 여백 영역을 의미하며, 요소들간에 공백을 둬서 구별하게 해주는 역할을 한다.
마진은 요소가 차지하는 전체 너비와 높이에 포함되지 않는다.

 

CSS를 작성하다가 margin을 주었는데 내가 원하지 않은 사이즈의 margin이 들어가는 경우를 종종 확인 할 수 있다

이러한 상황을 마진겹침현상때문에 발생하게 된다.

margin 겹침현상 (Margin-Collapsing)

<div class = "box1"> </div>
<div class = "box2"> </div>

마진겹침현상이란 사실 css를 만든 사람들이 의도한 동작이며

block-level요소와 block-level요소가 나란히(인접) 배치되어 있는 경우 상하단 마진(margin-top / margin-bottom)이 겹치는 현상이다. 좌우 마진은 마진겹침현상이 발생하지 않는다.

이러한 마진겹침현상은 사실 많이 문제가 되지 않는다.

위 요소의 margin-bottom과 아래 요소의 margin-top중에서 더 큰 값의 margin으로 선택하여 margin을 주게 되어있다.

 

하지만 이런 경우에는 문제가 발생한다

부모요소 자식요소 마진겹침 현상

<div class = "parent-box"> 
    <div class = "child-box">
    	부모요소 자식요소 마진겹침현상
    </div>
</div>

부모와 첫, 막내 자식관계에서도 두 요소 모두 block-level요소라면 마진 겹침현상이 발생한다. 

 

해결방안

• 텍스트같은 요소를 마진 현상이 발생하는 요소들간에 위치에 넣어주게 된다면 block-level요소들끼리 떨어지기 때문에 겹침현상이 없어진다. 하지만 불필요한 텍스트가 들어 갈 수 있기에 좋은 방법은 아니다
• 부모요소에게 padding,border 둘중에 하나를 선택해서 부모요소의 margin시작점과 자식요소의 margin시작점을 다르게 설정해준다면 해결 할 수 있다. 자식요소에게 padding이나 border을 준다고 해서 겹침현상이 해결되는 것은 아니다.
• 부모요소의 속성값으로 display : flow-root; 을 주면 해결 할 수 있다. (IE에서는 지원하지 않는다.)
• 부모요소의 속성값으로 overflow : hidden; 을 넣어주는 경우에도 해결을 할 수 있다.
• display : inline-block으로 설정해준다. 자식에게도 적용가능 block레벨요소들끼리가 아니기 때문에 마진 병합현상이 사라지지만inline-block의 특성을 가져가기 때문에 레이아웃에 문제가 발생할 수 도 있다.

 

body요소 안에있는 요소간의 마진 병합현상

body태그도 block요소이기 때문에 자식요소에 block와 마진겹침현상이 발생할 수 있기에 유의하도록 하자

 

 

 

 

자세한 내용은 이것을 참고하도록 하자

https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

CSS 마진 상쇄(Margin-collapsing) 원리 완벽 이해

https://velog.io/@ursr0706/%EB%A7%88%EC%A7%84margin

마진 병합 현상(Margin Collapsing)