마진겹침(margin-collapsing) 현상은 상하 마진값이 어떤 상황에서 사라지는 현상을 의미합니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만 이것을 이해하지 못하면 실무를 할 때 이해할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다.
마진겹침 현상 1
예제 - margin-collapsing-1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!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> |
