입사 첫 주에, 간단한 퍼블리싱 업무를 받아서 페이지를 짜는데
자식 div에 margin-top을 주려고 했는데 (왼쪽 그림을 희망함)
갑자기 부모 div에 margin-top이 생겨버리는 바람에 (오른쪽 그림처럼)
당황했던 경험이 있다.
자식 div의 마진이 부모 div에 대신 적용되는 위와 같은 경우뿐만 아니라
마진이 제대로 적용 안될 때가 간혹 있다고 하는데
학원에서 팀프로젝트 할 때는 정확한 원인을 모르고 대충대충 해결해왔던 것 같다
알아보니 마진 병합 현상 (margin collapsing) 이라고 한다!
div가 여럿일 때 마진이 꼬인다고...
이애 대한 설명은 많은 슴배님들의 개발 블로그에 잘 나와 있고
나도 100% 이해하지 못했으니 따로 설명하진 않는다.
그냥 자식div 마진이 부모div에 적용될때 라고 검색할 누군가를 위해,
그리고 입사 후 첫 셀프 배움(?)이었기에 기록해놓는다!
마진 병합 현상 실험하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>마진 병합 예시</title>
<style>
#div_a {
width: 500px;
height: 50px;
background-color: aquamarine;
}
#div_b {
width: 500px;
height: 200px;
background-color: pink;
}
#div_b_child {
width: 300px;
height: 50px;
background-color: seagreen;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="div_a"></div>
<div id="div_b">
<div id="div_b_child">
</div>
</div>
</body>
</html>
위 예제와 같은 코드이다.
div_a, div_b는 위 아래에 인접해 있고
div_b_child는 div_b에 속해 있는 자식 div이다.
구분하기 위해 임의로 아무렇게나 색깔 속성만을 주었다.
여기서, div_b_child에만 margin-top을 주면
난데없이 div_b에 적용되는 이상한 현상을 볼 수 있다
해결법 1 : 투명한 border 주기
#div_b {
width: 498px;
height: 200px;
background-color: pink;
border: 1px solid transparent;
}
#div_b_child {
width: 300px;
height: 50px;
background-color: seagreen;
margin-top: 30px;
}
div_b_child에는 의도대로 margin-top을 주고
부모 div인 div_b에 투명한 border를 준다.
(1px solid transparent)
이 때 주의할 점은 아무리 투명한 선이라고 한들
크기에 영향을 준다는 점이다
자세히 보면 같은 500px인데도 불구하고
div_b (핑크색 구역) 가 조금 더 보기싫게 튀어나와 있다.
그래서 div_b의 width를 498px (왼쪽 1px, 오른쪽 1px 빼줌)로 설정해줘야
줄이 맞는다.
그래서 개인적으로는 이 방법이 마음에 들지 않는다 ㅋㅋㅋㅋ
498이라니.. 뭐야.. 보기싫어...
계산해서 빼야 하다니... 뭐야... 별로야...
해결법 2 : 글씨 쓰기
부모 div에 텍스트가 있으면 마진 병합 현상이 안 일어난다고 함
그럼 글씨 안 쓸 때는요?
할많하않
해결법 3 : 패딩 padding 주기
#div_b {
width: 500px;
height: 200px;
background-color: pink;
padding-top: 30px;
}
#div_b_child {
width: 300px;
height: 50px;
background-color: seagreen;
}
자식 div인 div_b_child에 margin-top을 주지 말고
부모 div인 div_b에 padding-top을 주는 방법도 있다!
개인적으로 가장 깔끔한 방법인 듯하다.