Search

Margin Collapse

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>margin 상쇄 현상</title> <link rel="stylesheet" href="css/05_margin_collapse.css"> </head> <body> <center><h1>margin 상쇄 현상</h1></center> <div class="container"> <section></section> <section></section> <section></section> <section></section> </div> <hr> <h1>margin collapse 해결 - 1 padding</h1> <div class="container"> <section class="solve-1"></section> <section class="solve-1"></section> <section class="solve-1"></section> </div> <hr> <h1>margin collapse 해결 - 2 border</h1> <div class="container"> <div class="solve-2"><section></section></div> <div class="solve-2"><section></section></div> <div class="solve-2"><section></section></div> </div> <hr> <h1>margin collapse 해결 - 3 한방향 margin</h1> <div class="container"> <section class="solve-3"></section> <section class="solve-3"></section> <section class="solve-3"></section> </div> </body> </html>
HTML
복사

CSS

.container { position: relative; width: 1200px; height: auto; border: 5px dashed orange; margin: 100px auto; text-align: center; } section { margin: 100px auto; width: 900px; height: 200px; border: 3px solid gray; /* bd3-solid-gray */ } .solve-1 { padding: 50px 0; } .solve-2 { border: 1px solid hotpink; } .solve-3 { margin-top: 0; margin-bottom: 200px; } .solve-3:first-of-type { margin-top: 200px; }
CSS
복사