css中margin和padding的使用

转自：http://blog.youkuaiyun.com/limengmeng9006/article/details/8162350

1、设置属性方法

   margin和padding都是用来隔开元素，margin用于布局元素使元素与元素互不相干，padding是用于元素与内容之间的间隔。元素四边可以设置的属性：margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottom和padding-left。还可以按照上、右、下、左的顺序分别设置各边的边距，各边均可以使用不同的单位或百分比值：比如p{padding:10px 0.25em 2ex 20%}.

2、什么时候用margin，什么时候用padding

   margin和padding在许多地方往往达到的效果都是一模一样的，所以有时我们会迷惑margin和padding应当什么时候用哪个比较好。

何时应当使用margin：

（1）需要在border外侧添加空白时，

（2）空白处不需要有背景（色）时，

（3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白（注意地方见第三点）。

何时应当使用padding

（1）需要在border内侧添加空白时（往往是文字与边框距离的设置），

（2）空白处需要背景（色）时，

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

3、margin使用时应该注意的地方

margin在垂直方向上相邻的值相同时会发生叠加，水平方向上相邻的值会相加。margin取负值时，在垂直方向上，两个元素的边界仍然会重叠。但是，此时一个为正值，一个为负值，并不是取其中较大的值，而是用正边界减去负边界的绝对值，也就是说，把正的边界值和负的边界值相加。