<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin overlap solution</title>
<style type="text/css">
html.body{width:100%;height:100%;margin:0; }.m-test1 {margin: 0 0 10px; background: green;height: 50px;opacity: 0.6; }.m-test2 {margin: 10px 0 0; background: red;height: 50px;opacity: 0.6; }.m-method1 {display: inline-block;width: 100%; }.m-method2 {margin: 0;padding: 0 0 10px; }.m-test3{margin: 10px 0 0;background: green;opacity: 0.6; }.m-test4 {margin: 10px 0 0; background: red;height: 50px;opacity: 0.6; }</style>
</head>
<body>When the upper and lower margins of two vertically adjacent block-level elements meet, their margins will overlap, and the margins after overlap are equal to the larger one:<div class="m-test1"></div>
<div class="m-test2"></div>A:<div class="m-test1 m-method1"></div>
<div class="m-test2"></div>Method 2:<div class="m-test1 m-method2"></div>
<div class="m-test2"></div>Margin-top overlap of parent and child elements:<div class="m-test3">
<div class="m-test4"></div>
</div>Method one:<div class="m-test3" style="overflow:hidden;">
<div class="m-test4"></div>
</div>Method 2:<div class="m-test3" style="border-top:1px solid transparent;">
<div class="m-test4"></div>
</div>Method 3:<div class="m-test3" style="padding:1px 0 0;">
<div class="m-test4"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
Copy the code\
\
\
\
\