Question

CSS中padding属性和margin属性有什么实质上的区别？

Answer 1

给你一张图，对照上图就会很好的理解margin与padding的区别了：)

追问

之前已经看过了。但还是很难生动的理解。

追答

那我帮你对照图解释一下吧：

1. 图中黄色区域是padding值，也就是我们常说的内边距，它是文本内容（content）与边框（border）之间的距离。
2. 图中青色区域是margin值，也就是我们常说的外边距，它是从边框（border）到其它相邻元素之间的距离。

因为有四边，所以不管是外边距margin，还是内边距padding，都对应的有4个值，顺时针来看，以margin为例，margin-top上外边距，margin-right右外边距，margin-bottom下外边距，margin-left左外边距。

如果还不明白，再例说明一下：
例如，我们设margin-top:10px;也就是说上外边距10像素，也就是此内容区域的上端距它上方的元素有10像素的距离。

padding也是一样，只是它是内边距而已！

追问

比如说有一个宽高为100px的DIV。我定义padding：10px的话。那么内容区域只有90px*90px，如果我定义margin：10px的话，内容区域仍然是100px*100px；只是，这个模型盒整体是110px*110px的。是吧？
那么margin和padding在网页制作这一块儿。那些地方用得到呢？有些什么实例呢？感谢！

追答

做了个例子，两个div（背影为灰色），宽度都设为100px，如你所说，一个margin:10px;一个padding:10px;效果如图，很明显的就区别了。

最好是动手试着写一下代码，比研究这些文字清楚得多。新手也不要害怕，多写就好了。

至于，哪些地方用得到？网页中，元素与元素之间的空白区域，都是可以用到的，只是要注意一点，要合理的选择margin和padding，具体要选择哪一个，要根据内容的实际需要。

Answer 2

padding用来设置元素内容到元素边界的距离。
margin用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离.
能用padding的地方尽量不用margin因为margin在ie6下会产生双倍边距。

Answer 3

padding是内容到边界的距离，margin是相邻元素间的距离

Answer 4

........