마진겹침(margin collapsing) 규칙이란?
마진이 세로 방향으로 겹쳤을 때 마진 값이 더 큰 쪽을 따르게 되는 현상
- 형제 엘리먼트 간 (예제1)
- 부모/자식 엘리먼트 간 (예제2)
- 시각적인 요소가 없는 엘리먼트 자체적으로 (예제3)
예제
example1.html - 형제 엘리먼트 간의 마진겹침 현상 (jsfiddle, github)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body {
border:1px solid blue;
}
p {
margin:20px;
border:1px solid red;
}
</style>
</head>
<body>
<p> 생활코딩1 </p>
<p> 생활코딩2 </p>
<p> 생활코딩3 </p>
<p> 생활코딩4 </p>
</body>
</html>
example2.html - 부모 / 자식 엘리먼트 간의 마진겹침 현상 (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body style="border:1px solid blue"> <div style="margin-top:100px;"> <div style="margin-top:50px; background-color:green"> 마진겹침 </div> </div> </body> </html>
 |
 |
| 마진겹침이 적용되지 않았을 때 | 마진겹침이 적용 되었을 때 |
example3.html - 자기 자신의 마진 겹침, 엘리먼트가 컨텐츠로 시각적인 요소를 가지고 있지 않을 때 그 엘리먼트는 상하 마진 중 더 큰 값이 적용된다. (jsfiddle, github)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body style="border:1px solid blue"> <div style="margin-top:20px;margin-bottom:20px;"></div> <div style="margin-top:20px"> 마진겹침 </div> </body> </html>
