<!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重叠的解决办法
原创
©著作权归作者所有:来自51CTO博客作者徐同保的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:swiper轮播图实例
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
kubernetes无法删除namespaces命名空间的解决方法
通过etcd删除,亲测可行.[root@k8s-node1 dark]# kubectl get ns |grep TNAME STATUS AGEedison Terminating 6h27mwu
API kubernetes etcd namespaces k8s无法删除命名空间 -
避免UITableViewCell重叠的解决方法
在IOS开发的时候经常会用到UITableView,而当TableView
UITableViewCell重叠 ide bundle ios开发 -
CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一重叠也有例
css float 文档 border c -
老版本word文档打开文字重叠、重影解决方法
老版本的 word 文档用新版本的 word 打开经常会出现文字重叠的现象。解决方法: 全选之后修改字体即可。
1024程序员节 word文字重叠 word文字重影 解决方法 Python -
transformDexArchiveWithExternalLibsDexMergerForDebug 解决方法
Android 项目运行的时候报了这个错误,网上搜了一大堆说 jar 包重复,半天也
Android hive Deployment jar -
Redis set 数据结构怎么取
从 redis 内部实现的角度来说,redis 提供了 sds, dict, skiplist, ziplist 和 quicklist 数据结构,初步计划分为以下系列文章对 redis 数据结构进行归纳总结:redis 底层数据结构(1)——sdsredis 底层数据结构(2)——dictredis 底层数据结构(3)——skiplistredis 底层数据结构(4)——ziplis
Redis set 数据结构怎么取 c++数据结构代码整理 怎么给结构体数组动态分派内存 字符串 redis