<!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
今日推荐
周排行