margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。”10px 10px 10px 10px”分别代表”上右下左”(顺时针方向)四个边距，如果都一样，可以缩写成”MARGIN: 10px;”。如果边距为零，要写成”MARGIN: 0px;”。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位”px”。MARGIN是透明元素，不能定义颜色。PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成”PADDING:0px”。单独指定左边可以写成”PADDING-LEFT: 0px;”。PADDING是透明元素，不能定义颜色。
例子h2：
- h2 {
- font-size: 1.5em;
- background-color: #ccc;
- margin: 1em;
- padding: 3em;
- }
为什么不翻译margin和padding？原因一，在汉语中并没有与之相对应的词语； 原因二： 即使有这样的词语，由于在编写CSS代码时，必须使用margin和padding， 如果我们总用汉语词语代替其来解释的话，到了实际应用时容易混淆margin和padding的概念。
如果有一点Html基础的话，就应该了解一些基本元素(Element)，如p, h1~h6，br， div， li，ul，img等. 如果将这些元素细分，又可以分别归为顶级(top-level)元素，块级(block-level) 元素和内联(inline)元素。
1. Block-level element： 指能够独立存在，一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。 常用的块级元素包括: p, h1~h6, div, ul等；
2. Inline element： 指依附其他块级元素存在，紧接于被联元素之间显示。而不换行。常用的内联元素包括： img, span, li, br等；
3. Top-level element： 包括html，body， frameset，表现如Block-level element，属于高级块级元素。
块级元素是构成一个html的主要和关键元素， 而任意一个块级元素均可以用Box model来解释说明。
Box Model：任意一个块级元素均由content(内容)， padding， background(包括背景颜色和图片)， border(边框)， margin五个部分组成。
以下说明margin和padding属性：
Margin：包括margin-top， margin-right， margin-bottom， margin-left， 控制块级元素之间的距离，它们是透明不可见的，对于上右下左margin值均为40px， 因此代码为：
- h2{
- margin-top: 40px;
- margin-right: 40px;
- margin-bottom: 40px;
- margin-left: 40px;
- }
根据上, 右, 下, 左的顺时针规则, 简写为
- h2{
- margin: 40px 40px 40px 40px;
- }
当上下、 左右margin值分别一致, 可简写为：
- h2{
- margin: 40px 40px;
- }
前一个40px代表上下margin值，后一个40px代表左右margin值。
当上下左右margin值均一致，可简写为：
- h2{
- margin: 40px;
- }
Padding： 包括padding-top、 padding-right、padding-bottom、padding-left，控制块级元素内部content与border之间的距离， 其代码简写请参考margin属性的写法。
至此，我们已经基本了解margin和padding属性的基本用法。 但是，在实际应用中，却总是发生一些让你琢磨不透的事，而它们又或多或少的与margin有关。
注: 当你想让两个元素的content在垂直方向(vertically)分隔时，既可以选择padding-top/bottom，也可以选择margin-top/bottom，在此建议你尽量使用padding-top/bottom来达到你的目的，这是因为CSS中存在Collapsing margins(折叠的margins)的现象。
害我数了好几遍…