子DIV块中设置margin-top时影响父DIV块位置

小薇子
  • 82

<div class="container">

<div class="login">
</div>

</div>

.container{

width: 100%;
height:673px;
background-image: url("../img/login.jpg");

}

.login{

width: 40%;
height: 200px;
background-color: #999;
margin-top: 100px;

}

margin-top加在login里面 为什么container 也会被影响

回复
阅读 2.8k
1 个回答
wangfulin
  • 6.1k
✓ 已被采纳

1,因为.container没有设置border,这两个div会发生margin collapse,一个margin是0,一个是100px ,所以看起来像是.container这个divmargin一样
2,你可以设置一个border,这样的话就不会发生margin collapse,.login就会以.container作为参考进行定位啦
3,或者你可以触发.container的BFC,比如在.container中加入position:relative;或者overflow:hidden;等这样的话就不会发生margin collapse

参考链接:
margin-collapse
understanding-bfc-and-margin-collapse

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏