Question

在chrome中为什么给子div设置margin-top：20px,结果父和子div一起下移，两个div还是紧挨着。

Answer 1

也许是bug，也许是标准，不清楚原因，但是chrome和firefox都是如此。建议在父级div使用padding-top代替子div中的margin-top，如果有多个子div且不是全部需要margin-top的话，请在特定的子div外再嵌套一层。例如

<div style="padding-top:20px;">
    <div>test1</div>
</div>
<!--或者-->
<div>
    <div style="float:left;">test1</div>
    <div style="float:left; padding-top:20px;"><div>test2</div></div>
    <div style="float:left;">test3</div>
    <div style="clear:both;"></div>
</div>

Answer 2

这是一个bug，原因是因为浏览器之间对其解释不一样！
可以对子级加一个display:inline-block;这样就可以是margin-top有效，但是这样子级层不能加{ margin:atuo;}如果子级层宽度和父级层一样那没关系，如果比较小想居中只能在父级设置{ padding-top; };

Answer 3

“一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。”
解决方法：
改用padding-top
如果非要用margin-top的话，可以给父div加上padding-top或border-top

推荐你看下这篇文章：http://www.hicss.net/do-not-tell-me-you-understand-margin/

Answer 4

如果可以的话设置父DIVpadding-top：20px；，或者清除子DIV的浮动，用clear：both：属性。

Answer 5

着是当然的了，不管在什么浏览器中都会这样啊，子级的标签会跟着父级的标签。

追问

可是对子div设置了margin-top的值了

追答

子级设置了就会相对于父级来进行定位