Question

这是html中body的开头： <div class="div1"> <div class="div2"> <img src=""/> </div> </div>

1.当样式:.div2{margin:20px;}时，div1和div2都会下移动20px;
2.当样式:.div2{padding:20px;}时，只有里面的图片会下移动20px;
为什么？？我觉的第一种情况应该是div2 下移动20px;

Answer 1

超简单：
给div1加上overflow:hidden;就行了。。。

给div1或者div2加上float:left也可以解决，

给div1加border:1px solid transparent;也可以解决，，但是宽度会多1px

还有就是用绝对定位来解决，给div1加上：position:relative;z-index:0，div2加上：position:absolute;也是可以解决的。。。

哦还有一个办法，，

给div1加上padding-top:1px也是可以的。

Answer 2

我不知道楼主为什么要用这么多DIV，代码尽量简化，你可以直接说您要达到什么要求。
CSS：主要的是盒子模型
楼主可以借助浏览器的开发插件来查看变化 如果楼主喜欢折腾的话！

测试才能出真正 浏览器是什么样的就是啥样的 切勿掉进自己的陷阱里！祝好！

Answer 3

首先确保html头的文档申明是否符合W3C规范

Answer 4

不是下移，是上下左右全部移动20px