码迷,mamicode.com
首页 > 其他好文 > 详细

子元素的margin-top和margin-bottom影响父元素定位的原因和解决方法

时间:2015-01-22 21:28:28      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>     
<html>
<head>
    <title>margin transfer </title>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin: 0;padding: 0;}
        .outer{width: 100px;height: 100px;background: #ccc;}
        .inner{width: 50px;height: 50px;background: #f00;margin-top: 30px;}
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>
上面的代码表示一个灰色背景的outer嵌套了一个红色背景的inner,按照正常的思维,inner的顶部和outer的顶部有30px的距离,
但实际上并未如此,inner的顶部和outer的顶部重合,而outer的顶部和body顶部产生了30px的距离。(如果inner的css属性中含有margin-bottom也会出现类似的情况)
 
原因:
CSS2.1的盒模型中规定,所有毗邻的两个或更多盒元素的margin-top和margin-bottom将会合并为一个margin共享之。(毗邻的意思就是同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔)
 
解决方法:
最简单的方法:给父元素outer 添加 overflow:hidden 属性;
其它方法:给父元素outer 添加 position: absolute/fixed 或 display: inline-block 或 float: left/right

子元素的margin-top和margin-bottom影响父元素定位的原因和解决方法

标签:

原文地址:http://www.cnblogs.com/happyfreelife/p/4242538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!