问题：在chrome中2个div,一个嵌套另一个,被嵌套的那个层的margin-top不起作用,div2在Chrome浏览器中总是0px顶着div1
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
<!--
body{
background-color:#AEB9F4;
}
#div1{
width:602px;
height:602px;
margin:20px auto;
background-color:#EDD923;
}
#div1 #div2{
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
width:560px;
height:560px;
border:1px solid #000;
}
-->
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
原因：盒子没有获得 haslayout 造成 margin-top无效
解决办法：
1、在div1父层加上：overflow:hidden；
2、把margin-top外边距改成padding-top内边距 ；
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
div1加： padding-top: 1px; /* 或 border-top: 1px solid red; */
4、让父元素生成一个 block formating context，以下属性可以实现
* float:
left/right
* position: absolute
* display:
inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
原文地址《margin-top问题:在chrome中2个div,一个嵌套另一个,被嵌套的那个层的margin-top不起作用,div2在Chrome浏览器中总是0px顶着div1》
发表评论