margin和padding辨析以及应用场景

半年前学习css的时候很多东西都是一笔带过，现在回过头来仔细看看里面的知识点。事实上，越是这种看似简单的内容更要静下心来认真揣摩。

首先看看盒子模型(box model)图，具体内容在这就不介绍了，这里重点放在margin和padding上面，一个形象的说法是，比如一个盒子里有一个瓶子，瓶子与盒子之间的距离就称为padding，盒子与另一个盒子之间的距离就称为margin。

下面看看实例

margin-top情况下

分析：

灰色部分为宽度为10的boder,金黄色部分为父元素center，session1和session2为两个并列的子元素

我们在浏览器中打开调试器，经过调试我们发现：

逐渐减小session1的margin-top大小，session1和session2部分会整体上移，两者之间的距离不会改变，而且session1的背景色大小也一直没有改变,当值为0时，session1的上边框与center的上边框会重叠，而且margin-top的值也可以为负值，此时session1部分进入到top部分

逐渐减小session2的margin-top大小，session2部分会整体上移，session1部分保持不动，当值为负值时session2进入session1

改margin-top为padding-top:

打开调试，我们发现：

减小session1的padding-top值，session1部分的背景色区域大小一直在改变，但padding-top的最小值只能为0px,不能为负值，也没有挤入其他部分的情况

根据以上分析，总结出：

margin(边界)是元素周围生成额外的空白区，空白区是指其他元素不能出现且父元素背景可见的区域。它是透明的，没有背景色。

padding为内边距，即边框里内容正文的距离，在css权威指南中叫做“留白”，似乎这种称谓更加生动。它是不透明的，有背景色的。

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

margin用来分割两个块元素，而padding更多情况下来扩展元素，在不固定高度布局中，padding用来撑起元素高度。

margin会发生上下边框折叠 ，会发生挤入现象，padding不会

padding会占据背景图片

padding和border会扩展元素的可见区域

margin会有负值，而padding没有负值

何时应当使用margin

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding

需要在border内测添加空白时。

空白处需要背景（色）时。

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