新手提问，css中父div里面有一个子div，给子div添加margin-top: 20px，发现了一个问题！！
给子div添加margin-top: 20px，发现父子DIV都一起相对BODY下移了20PX，为何不是只是子DIV下移20PX ？ 如果我给父DIV添加border: 1px solid，就可以实现父DIV不动，只是子DIV相对父DIV下移了20PX，难道就一定要设置父DIV的border才能实现吗？ 谢谢！ 代码如下：
<head>
<title></title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#father
{
width: 500px;
height: 400px;
background: pink;
border: 1px solid;
}
#child
{
width: 100px;
height: 50px;
margin-top: 20px;
background: blue;
}
</style>
</head>
<body>
<div id="father">
<div id="child">
</div>
</div>
</body>
第1个回答 推荐于2017-11-25
给父亲div 设置 overflow: hidden; 试试看追问
设置后完美解决，在各ie版本和火狐都没有问题，不知可否解释一下为何用到这个属性？隐藏溢出我觉得好像没什么关系啊。。。
追答有个叫 bfc 的东西 叫 块级元素格式化上下文 overflow hidden 或者描边可以触发 bfc 就可以解决这个问题 希望对你有帮助
本回答被提问者采纳第2个回答 2012-07-05
浏览器兼容问题，你可以强制使用IE6以上版本
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
这代码加到head部分即可追问
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
这代码加到head部分即可追问
在IE就可以，但去到火狐就失效了，给张图您看。
*
{
margin:0 0px;
padding:0 0px;
}
一般设置这个让所有属性初始化解决浏览器默认属性不一样
第3个回答 2012-07-05
其实很简单，不用给父元素加边框，也不用给子元素加margin-top值，直接给父元素加一个padding-top:20px.问题就解决了。
第4个回答 2012-07-05
？我把你的
border: 1px solid;
删掉了还是显示正常
这是怎么回事
按理说上一级怎么可能反过来继承下一级的属性呢
不知你的怎么那么奇怪本回答被网友采纳
border: 1px solid;
删掉了还是显示正常
这是怎么回事
按理说上一级怎么可能反过来继承下一级的属性呢
不知你的怎么那么奇怪本回答被网友采纳
相似回答