margin 和 padding 的使用区别

最新推荐文章于 2025-05-27 11:32:54 发布

Ruo_Xiao

最新推荐文章于 2025-05-27 11:32:54 发布

阅读量745

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

原文链接：https://blog.csdn.net/likeky/article/details/105435464

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细解读了CSS中的margin和padding概念，教你如何设置元素的内外边距，理解何时选择margin，何时用padding，以及它们在布局中的区别。实例演示了不同边距设置方式，并揭示了间距设计的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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！）