<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin重叠的解决办法</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>
两个垂直相邻的块级元素，当上下两个边距相遇时，其外边距会产生重叠现象，且重叠后的外边距，等于其中较大者：
<div class="m-test1"></div>
<div class="m-test2"></div>
方式一：
<div class="m-test1 m-method1"></div>
<div class="m-test2"></div>
方式二：
<div class="m-test1 m-method2"></div>
<div class="m-test2"></div>
父子元素margin-top重叠：
<div class="m-test3">
<div class="m-test4"></div>
</div>
方法一：
<div class="m-test3" style="overflow:hidden;">
<div class="m-test4"></div>
</div>
方法二：
<div class="m-test3" style="border-top:1px solid transparent;">
<div class="m-test4"></div>
</div>
方法三：
<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>
margin重叠的解决办法
猜你喜欢
转载自blog.csdn.net/xutongbao/article/details/79882939
今日推荐
周排行