margin和padding的使用

一、margin外边距

元素周围生成额外的空白区，“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

二、padding内边距

称呼为内边距，其判断的依据即边框离内容正文的距离。

padding的用法 大体上来说，与margin略有不同，但是在距离设定上一致。

三、margin和padding的使用区别

margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的：

何时应当使用margin：

需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的 两个盒子之间的空白，需要相 互抵消时。

如15px+20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。

如15px + 20px的padding，将得到35px的空白。

我们先不设置内边距和外边距为0，效果如下，很明显距离上面和左边都留出了空白。

这是我们设置完内边距和外边距为0之后，就清除了左边和上面的留白。