마진겹침(margin-collapsing) 현상은 상하 마진값이 어떤 상황에서 사라지는 현상을 의미합니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만 이것을 이해하지 못하면 실무를 할 때 이해할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다.
마진겹침 현상 1
예제 - margin-collapsing-1.html
<!DOCTYPE html>
<html>
<head>
<style>
h1{
border:1px solid red;
margin:100px;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<h1>Hello world</h1>
</body>
</html>
마진겹침 현상 2
예제 - margin-collapsing-2.html
<!doctype html>
<html>
<head>
<style>
#parent{
/* border:1px solid tomato;*/
margin-top:100px;
}
#child{
background-color: powderblue;
margin-top:50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
Hello world
</div>
</div>
</body>
</html>
마진겸침 현상 3
예제 - magin-collapsing-3.html
<!doctype html>
<html>
<head>
<style>
#empty{
margin-top:50px;
margin-bottom: 100px;
/* border:1px solid tomato;*/
}
#normal{
background-color: powderblue;
margin-top:100px;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal">normal</div>
</body>
</html>
