星空网 > 软件开发 > 网页设计

如何解决外边距叠加的问题?

第一种

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
#a1{
width:200px;
height:200px;
border:1px solid red;

margin-bottom:20px;

}
#a2{
margin-top:20px;
width:100px;
height:100px;
display:inline-block;/*或者绝对定位(position:absolute)或者是浮动元素*/
border:1px solid black;

}

</style>
</head>
<body>
<div id="a1">
</div>
<div id="a2">
</div>

</body>

第二种

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
#container{
overflow:hidden;

zoom:1;
}
#a1{
border:1px solid red;
width:200px;
height:200px;
background:green;
margin-bottom:20px;
}
#a2{
border:1px solid red;
width:200px;
height:200px;
background:red;
margin-top:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="a1">
</div>
</div>
<div id="container">
<div id="a2">
</div>
</div>
</body>
</html>



如何使元素上下margin不折叠呢?

1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠(注意这里指的是上下相邻的元素)
2.创建了块级格式化上下文的元素,不和它的子元素发生 margin 折叠
 
第二种方法:把这两个 <div> 分别放进两个建立了 BFC (IE7- 触发 hasLayout)的父级容器里.
要建立 BFC 的不是这两个 <div> 而是它们所在的父级容器.


触发block formatting context即可,触发的方法:
1. float不为none
2. overflow不为visible
3. display设为‘table-cell’, ‘table-caption’, 或‘inline-block’
4. position既不是static也不是relative
5. zoom:1, IE的hasLayout特性会建立一个新的block formatting context






原标题:如何解决外边距叠加的问题?

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

TikTok在英国推出首个直播购物活动"On Trend":https://www.kjdsnews.com/a/707246.html
一招教你查看feed显示商品违规!:https://www.kjdsnews.com/a/707247.html
物流“国家队”成立!物流成本或将大降!:https://www.kjdsnews.com/a/707248.html
亚马逊欧洲站销售产品,卖家需要注意哪些细节?:https://www.kjdsnews.com/a/707249.html
速看!亚马逊新加坡站11.11首秀拉动流量暴涨!:https://www.kjdsnews.com/a/707250.html
舱位继续收紧、运费不断上涨,新的危机出现!:https://www.kjdsnews.com/a/707251.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流