HTML css margin和padding学习
你在学习margin和padding的时候是不是懵了，——什么他娘的内边距，什么他娘的外边距。呵呵呵，刚开始我也有点不理解，后来通过查资料学习总算弄明白了，现在我来谈一下自己对margin和padding的理解：
一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
1.<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2.<htmlxmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.<metahttp-equiv="Content-type"content="text/html;charset=UTF-8"/>
5.<styletype="text/css">
6.body{
7.margin:0px;
8.}
9.
10..test1{
11.width:150px;
12.height:150px;
13.border:6pxsolidred;
14.}
15.
16..test2{
17.margin-top:40px;
18.padding-top:40px;
19.width:150px;
20.height:150px;
21.border:6pxsolidgray;
22.}
23.
24..test2_son{
25.width:80px;
26.height:50px;
27.border:12pxsolidblue;
28.}
29.</style>
30.</head>
31.<body>
32.<divclass="test1">test1</div>
33.<divclass="test2">
34.<divclass="test2_son">test2_son</div>
35.</div>
36.</body>
37.</html>
图01
说明：图01中灰色地带是class值为test2的div的边框，它是有宽度的；
①、外边距：外边距指的是margin作用元素（这里是class值为test2的div）边框外延距离另一个元素边框外延（如果另一个元素和margin作用元素同级（这里是class值为test1的div））或内延（如果另一个元素是margin作用元素父级）的距离，如上图；
②、内边距：内边距指的是margin作用元素（这里是class值为test2的div）边框内延距离其子元素边框外延的距离，如上图；
③、内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2div的内边距在class值为test2_testdiv元素看来就是外边距，所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40px;”去掉，class值为test2_testdiv元素添加“margin-top:40px;”——这样的效果和代码2-1是一样的；
三、margin和padding的属性值
①、它们的默认值都是0；它们的属性值都可以为auto——margin作用的元素由浏览器计算外边距，padding作用的元素由浏览器计算内边距；都可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距，padding继承父元素内边距，但由于inherit在任何的版本的InternetExplorer（包括IE8）都不支持，所以也就没有学习的必要了。
②、margin允许指定负的外边距值，不过使用时要小心；padding不允许指定负边距值；
③、margin和padding的属性值都可以有1个、2个、3个和4个：
a、margin有4个属性值(例如margin:10px5px15px20px;)，其含义是：上外边距10px、右外边距5px、下外边距15px、左外边距20px；
padding有4个属性值(例如padding:10px5px15px20px;)，其含义是：上内边距10px、右内边距5px、下内边距15px、左内边距20px；
总结：无论是margin还是padding，如果有4个属性值，那么它们的作用方向顺时针依次为上、右、下、左；
b、margin有3个属性值(例如margin:10px5px15px;)，其含义是：上外边距10px、右外边距和左外边距5px、下外边距15px；
padding有3个属性值(例如padding:10px5px15px;)，其含义是：上内边距10px、右内边距和左内边距5px、下内边距15px；
总结：无论是margin还是padding，如果有3个属性值，那么它们的作用方向顺时针依次为上、右左、下；
c、margin有2个属性值(例如margin:10px5px;)，其含义是：上外边距和下外边距10px、右外边距和左外边距5px；
padding有2个属性值(例如padding:10px5px;)，其含义是：上内边距和下内边距10px、右内边距和左内边距5px；
总结：无论是margin还是padding，如果有2个属性值，那么它们的作用方向顺时针依次为上下、右左；
d、margin有1个属性值(例如margin:10px;)，其含义是：4个外边距都是10px；
padding有1个属性值(例如padding:10px;)，其含义是：4个内边距都是10px；
总结：无论是margin还是padding，如果有1个属性值，那么它们的边距值都是相等的；