简单的css中margin问题
<html><head><styletype="text/css">*{margin:0;border:0;padding:0;}#demo{width:500px;he...
<html>
<head>
<style type="text/css">
*{
margin:0;
border:0;
padding: 0;
}
#demo{
width: 500px;
height: 500px;
background-color: red;
}
.child{
width: 200px;
height: 200px;
background-color: green;
margin:50% auto;
}
</style>
</head>
<body>
<div id="demo">
<div class="child"></div>
</div>
<script type="text/javascript" src="jquery-2.1.1.min"></script>
<script>
</script>
</body>
</html>
代码如上，可是为什么给child一个margin：50% auto的外边距，会导致父容器demo也有一个margin且和child一样的？求高手指教~~ 展开
<head>
<style type="text/css">
*{
margin:0;
border:0;
padding: 0;
}
#demo{
width: 500px;
height: 500px;
background-color: red;
}
.child{
width: 200px;
height: 200px;
background-color: green;
margin:50% auto;
}
</style>
</head>
<body>
<div id="demo">
<div class="child"></div>
</div>
<script type="text/javascript" src="jquery-2.1.1.min"></script>
<script>
</script>
</body>
</html>
代码如上，可是为什么给child一个margin：50% auto的外边距，会导致父容器demo也有一个margin且和child一样的？求高手指教~~ 展开
1个回答
展开全部
这位网友你好，你遇到的是Margin垂直外边距合并问题，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下
(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己
“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的
border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下
(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己
“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的
border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。
对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个border-top或者padding-top即可解决这个问题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
