[CSS] margin-top 요소(태그) 밖으로 넘칠 때 / margin-top 버그

웹 앱을 위한 스켈을 만들던 중 뭔가 이상한 점을 발견했는데

최 상단바(뒤로가기, 네비게이션)컴포넌트와 캐러셀 슬라이드 컴포넌트를 불러온 후 

 

Wrapper의 제일 상위 자식에게 margin-top을 주면 그 마진이 Wrapper를 넘어갔다.

<Topbar></Topbar>
<Carousel></Carousel>

<div className="Mode">
	<div className="ModeWrapper">
    		<div className="modeTitleHead">
        		왜 마진이 부모 요소를 넘어가지..?
        	<div>
        ..
    </div>
</div>

코드는 대강 이런식이였고

 

위는 네비바, 아래는 해당 페이지의 컴포넌트

원래 두 컴포넌트가 딱 붙어있어야 하지만 최상위 자식요소의 margin-top이 부모 요소를 밀어내면서

기본 배경색인 회색이 드러났다.

검색을 해 보니 자식요소에게 부여한 margin-top 속성이 부모 박스를 밑으로 떨어지게하는 버그라고 한다.

 

 

해결 방법은

부모 요소에 overflow:auto 속성을 주거나

자식 요소에 position:relative 속성을 주면 해결된다고 하는데

직접 해본 결과 position:relative 속성으로는 해결되지 않았다.

 

#Wrapper{
	overflow:auto;
}

해결