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

回复

我来回复
  • 暂无回复内容