margin 和 padding 的使用区别

1、平面图

2、立体图

3、margin 外边距

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

关于外边界距离的设定，规则如下：

/*四周相同*/ margin: 20px;/*10px上下 20px左右 */ margin: 10px 20px;/*10px上 15px左右 30px下*/ margin: 10px 15px 30px;/*上右下左*/ margin: 10px 15px 20px 25px;/*设置自动居中则可以使用*/ margin：0 auto；

4、padding 内边距（补白）

称呼为内边距，其判断的依据即边框离内容正文的距离，而我喜欢CSS权威指南解释的“补白”（或者叫“留白”），因为他很形象。补白（padding）：补白位于元素框的边界与内容区之间。很自然，用于影响这个区域的属性是 padding。——CSS权威指南

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

5、margin 和 padding 的使用区别

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

（1）何时应当使用 margin

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

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

（2）何时应当时用 padding

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

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

个人认为：

margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔。

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

 

（SAW：Game Over！）

总结

以上是生活随笔为你收集整理的margin 和 padding 的使用区别的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。