마진겹침(margin collapsing) 규칙이란?
마진이 세로 방향으로 겹쳤을 때 마진 값이 더 큰 쪽을 따르게 되는 현상
- 형제 엘리먼트 간 (예제1)
- 부모/자식 엘리먼트 간 (예제2)
- 시각적인 요소가 없는 엘리먼트 자체적으로 (예제3)
예제
example1.html - 형제 엘리먼트 간의 마진겹침 현상 (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!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)
1 2 3 4 5 6 7 8 9 10 11 12 | <!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> |
