标签：
下文引自HTML CSS——margin和padding的学习，作者fengyv，不过加入了一些个人的看法。
你在学习margin和padding的时候是不是懵了，——什么他娘的内边距，什么他娘的外边距。呵呵呵，刚开始我也有点不理解，后来通过查资料学习总算弄明白了，现在我来谈一下自己对margin和padding的理解：
一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距。(用代码来说明)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> body { margin: 0px; } .test1 { width: 200px; height: 200px; border: 10px solid red; } .test2 { margin-top: 50px; padding-top: 50px; width: 200px; height: 200px; border: 10px solid gray; } .test2_son { width: 80px; height: 100px; border: 20px solid blue; } </style> </head> <body> <div class="test1">test1</div> <div class="test2"> <div class="test2_son">test2_son</div> </div> </body> </html>
(下面对运行结果进行详解，图示如下：)
(通过上图来理解作者接下来写的文字，应该很容易理解)
①外边距：外边距指的是margin作用元素（这里是class值为test2的div）边框外延距离另一个元素边框外延（如果另一个元素和margin作用元素同级（这里是class值为test1的div））或内延（如果另一个元素是margin作用元素父级(此话不甚理解？？？)）的距离，如上图；
②内边距：内边距指的是margin作用元素（这里是class值为test2的div）边框内延距离其子元素边框外延的距离，如上图；
③内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2 div的内边距在class值test2_test(作者写错了，应为test2_son) div元素看来就是外边距，所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40px;”去掉，class值为test2_test(同上) div元素添加“margin-top:40px;”——这样的效果和代码2-1(示例)是一样的。
三、margin和padding的属性值
①它们的默认值都是0；它们的属性值都可以为auto——margin作用的元素由浏览器计算外边距，padding作用的元素由浏览器计算内边距；都可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距，padding继承父元素内边距，但由于inherit在任何的版本的 Internet Explorer （包括 IE8）都不支持，所以也就没有学习的必要了。
②margin允许指定负的外边距值，不过使用时要小心；padding不允许指定负边距值。
③margin和padding的属性值都可以有1个、2个、3个和4个：
标签：
原文地址：http://www.cnblogs.com/yerenyuan/p/5343498.html
