您的位置：首页 > 运维架构

div嵌套margin-top失效的解决方法

2015-07-02 10:54 274 查看
近日学习过程中，出现一个问题：内外多层div嵌套时，margin-top不起作用，margin-left起作用，查询百度，有结果：

当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。

经过测试，得如下解决方法，详请见代码中的注释：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div嵌套内层margin-top不起作用</title>
<!--
div嵌套内层margin-top不起作用
@author:yard39@163.com
原因：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。
-->
<style type="text/css">
.outer{
width:500px;
height:400px;
background-color:#ccc;
/*解决方法一：外层加float
float:left;*/
/*解决方法二,外层用padding，但内层不能再设置margin-top,否则间距会相加
padding-bottom:20px;*/
/*解决方法三：给外层加个边框，可以设置边框颜色与周围一致
border:1px  dashed #333;*/
/*综合来看，第一种方法要记得后面加clear,第二种方法容易引起兼容性问题，第三种方法带边框可能不合使用要求，第四种方法推荐*/
}
.inner{
width:300px;
height:200px;
background-color:#333;
margin-top:20px;
margin-left:20px;
}
</style>
</head>
<body>
<div class="outer">
<!--内外层之间没有元素-->
<!--解决方法四：在内层之上加入下面的代码：
<div style="height:0px;"> </div>-->
<div class="inner">
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航