最近工作时发现margin-top在火狐和谷歌中没预期的效果。失效，

html代码：

<div class="box">
  <div class="box2"> 蓝枫蓝枫 </div>
</div>

css样式

<style type="text/css">
*{ margin:0; padding:0;}

.box{ width:500px; height:300px; margin:0 auto; background-color:#0099FF;}
.box2{ width:200px; height:100px; margin-top:30px; background-color:#993300;}
</style>

总结了一些解决的办法如下

1.在box里面加overflow:hidden;这样就可以解决问题了。备注：这里如果把溢出隐藏了，做其他的会有什么问题你懂的。

2.在box里面补上边框border:1px solid #000000;备注：不需要边框的就不合适了。

3.在box里面补上内补丁padding-top:1px;备注：这样是不是也不错呢？

4.这个是在.box2给一个浮动float:left; 备注：这样就有浮动了。还要考虑清除浮动，可以不用此方法

页面来源：https://blog.csdn.net/lfcss/article/details/6891150