margin-top失效传递给父元素解决方案
分类：实例代码
可能在有些时候，大家会遇到这样的情况，那就是给子元素设置的上外边距会传递给父元素。
先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box {
width:200px;
height:100px;
background:#ccc;
}
#inner {
width:100px;
height:50px;
background:blue;
margin-top:20px;
}
</style>
</head>
<body>
<div id="box">
<div id="inner"></div>
</div>
</body>
</html>
上面的代码在IE8和IE8以上浏览器还有其他标准浏览器中，都会将子元素的上外边距传递给父元素。
根据规范，一个盒子如果没有上内边距和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
解决方法非常简单，那就是反其道而行之，比如设置上内边距或者上边框，或者触发BFC。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#box {
width:200px;
height:100px;
background:#ccc;
border-top:1px solid red;
}
#inner {
width:100px;
height:50px;
background:blue;
margin-top:20px;
}
</style>
</head>
<body>
<div id="box">
<div id="inner"></div>
</div>
</body>
</html>
上面的代码解决了margin-top失效问题，当然使用何种方式解决要看实际情况，你不能客户要求不能有上边框，你非要加上一个上边框，可选择的方式还是很多的。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu