何时在CSS中使用边距与填充

小开

边距位于块元素的外部，而填充位于内部。

使用边距将块与其外部的东西分开
使用填充将内容从块的边缘移开。

输入图片描述

小开

需要注意的一件事是，当自动折叠边距惹恼您（并且您没有在元素上使用背景颜色）时，使用填充会更容易。

小开

关于边距的问题是，您不需要担心元素的宽度。

就像当你给出{padding: 10px;}时，你必须将元素的宽度减少20px以保持“适合”并且不打扰它周围的其他元素。

因此，我通常首先使用paddings来获取所有“packed”，然后使用边距进行小调整。

另一件需要注意的事情是，paddings在不同的浏览器上更加一致，IE不能很好地处理负边距。

小开

下面是一些超文本标记语言，演示了padding和margin如何影响可点击性和背景填充。一个对象会收到对其填充的点击，但点击一个对象的边距区域会转到其父对象。

$(".outer").click(function(e) {console.log("outer");e.stopPropagation();});
$(".inner").click(function(e) {console.log("inner");e.stopPropagation();});

.outer {padding: 10px;background: red;}
.inner {margin: 10px;padding: 10px;background: blue;border: solid white 1px;}

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="outer"><div class="inner" style="position:relative; height:0px; width:0px">
</div></div>

小开

我见过的最好的例子，图表，甚至是“自己试试”的观点是这里。

我认为下面的图表提供了对差异的即时视觉理解。

输入图片描述

要记住的一件事是符合标准的浏览器（IE怪癖是个例外）仅将内容部分呈现为给定的宽度，因此请在布局计算中跟踪这一点。还要注意，边框框看到了一些使用Bootstrap 3回归支持它。

小开

最佳答案

太长别读：默认情况下，我在任何地方都使用边距，除非我有边框或背景并且想要增加可见框内的空间。

对我来说，填充和边距之间最大的区别是垂直边距自动折叠，而填充不会。

考虑两个元素，一个在另一个上面，填充1em。此填充被认为是元素的一部分并始终保留。

因此，您将以第一个元素的内容结束，然后是第一个元素的填充，然后是第二个元素的填充，然后是第二个元素的内容。

因此，这两个元素的内容最终将被2em分开。

现在用1em边距替换该填充。边距被认为在元素之外，相邻项目的边距将重叠。

所以在这个例子中，你将得到第一个元素的内容，然后是1em的组合边距，然后是第二个元素的内容。所以两个元素的内容只有1em分开。

当你知道你想说一个元素周围的行间距1em时，这真的很有用，不管它旁边是什么元素。

另外两个最大的区别是，点击区域和背景颜色/图像中包含了填充，但不包含边距。

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }div.padding > div { padding-top: 20px; }div.margin > div { margin-top: 20px; }

<h3>Default</h3><div class="box"><div>A</div><div>B</div><div>C</div></div>
<h3>padding-top: 20px</h3><div class="box padding"><div>A</div><div>B</div><div>C</div></div>
<h3>margin-top: 20px; </h3><div class="box margin"><div>A</div><div>B</div><div>C</div></div>

小开

MARGIN vs填充：

边距用于在元素中创建该元素与页面其他元素之间的距离。其中填充用于在元素的内容和边框之间创建距离。

当填充是元素的一部分时，边距不是元素的一部分。

请参考下面从边距与填充-CSS属性提取的图像

边距与填充

小开

对于你的问题有更多的技术解释，但是如果你想要一种考虑边距和填充的方法，这个类比可能会有所帮助。

将块元素想象成挂在墙上的相框：

照片是内容。
这就是填充。
框架成型是边境。
墙是视口。
两帧之间的间隔是保证金。

考虑到这一点，一个好的经验法则是当你想要在墙上的元素与其他元素的关系中分隔一个元素时使用保证金，当你调整元素本身的外观时使用填充。边距不会改变元素的大小，但填充会使元素更大¹。

¹您可以使用#0属性更改此行为

小开

边距清除元素周围的区域（边框外），但填充清除元素内容周围的区域（边框内）。

输入图片描述

这意味着您的元素不知道它的外部边距，因此如果您正在开发动态Web控件，我建议尽可能使用填充与边距。

请注意，有时您必须使用页边距。

小开

高级保证金与填充解释

使用padding来分隔元素中的内容是不合适的；你必须在子元素上使用margin代替。旧的浏览器，如Internet Explorer误解了盒子模型，除了使用margin时，它在Internet Explorer 4中完美地工作。

使用padding是时有两个例外适合使用：

它应用于不能包含任何子元素（例如输入元素）的内联元素。

你正在补偿一个高度杂乱的浏览器bug供应商*咳嗽*Mozilla*咳嗽*拒绝修复，并且确信（在某种程度上，你与W3C和WHATWG编辑定期交换）你必须有一个工作解决方案，这个解决方案不会影响任何其他bug的样式。

当你有一个100%宽度的元素padding: 50px;时，你实际上得到了width: calc(100% + 100px);。由于margin是没有添加到width中，当你在child elements上使用margin而不是直接在元素上使用padding时，它不会导致意外的布局问题。

因此，如果你是没有做这两件事之一，请没有向元素添加填充，但它是直接的子/子元素，以确保你将在所有浏览器中获得预计行为。

小开

很高兴知道margin和padding之间的区别。以下是一些差异：

边距是元素的外层空间，而填充是元素的内部空间。
Margin是元素边框外的空格，而padd是元素边框内的空格。
Margin接受auto：margin: auto的值，但您不能将填充设置为自动。
提示：您可以使用该技巧使元素在其父元素内居中（甚至垂直）。例如，请参阅我的另一个答案。
边距可以设置为任何数字，但填充必须非负。
当您为元素设置样式时，填充也会受到影响（例如背景颜色），但不会影响边距。

小开

从https://www.w3schools.com/css/css_boxmodel.asp

不同部分的解释：

Content-文本和图像出现的框的内容
填充-清除内容周围的区域。填充是透明的
边框-围绕填充和内容的边框
Margin-清除边框外的区域。边距是透明的

实时示例（通过更改值来玩）：https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

小开

首先，让我们看看有什么区别以及每个责任是什么：

1）保证金

CSS边距属性用于在元素周围生成空间。
边距属性设置外部空格的大小边框。使用CSS，您可以完全控制边距。
有用于设置元素每边的边距的CSS属性（上，右，下，左）

2）填充

CSS填充属性用于在内容周围生成空间。
填充会清除内容周围（边框内）的区域一个元素。
使用CSS，您可以完全控制填充。那里是CSS属性，用于为元素的每一侧设置填充（上，右，下，左）

所以简单地说，保证金是元素周围的空间，而填充是元素的一部分内容周围的空间。

这张来自编码者的图片显示了边距和边框是如何结合在一起的，以及边框框和内容框是如何使它不同的。

他们还将每个部分定义如下：

会议内容-这定义了框的内容区域，其中包含实际内容，如文本、图像或其他元素。
填充-这将从其包含框中清除主要内容。
边境-它围绕内容和填充。
保证金-这个区域定义了一个透明的空间，将它与其他元素分开。

小开

保证金

Margin通常用于在元素本身和它的环绕之间创建一个空间。

例如，我在构建导航条时使用它，使其粘在屏幕边缘，没有白色间隙。

填充

我通常在边框中有一个元素时使用，<div>或类似的东西，我想减小它的大小，但同时我想保持它周围其他元素之间的距离或边距。

简而言之，这是情境的；这取决于你想做什么。

小开

我一直遵循这个原则：

这是Firefox中检查元素功能的框模型。它像洋葱一样工作：

你的内容在中间。
填充是内容和标签边缘之间的空格里面。
边界及其规格
边距是标记周围的空间。

因此，更大的边距将在包含内容的盒子周围腾出更多空间。

较大的填充将增加内容与其所在框之间的空间。

如果设置为特定值，它们都不会增加或减少框的大小。

小开

保证金在盒子外面，填充在盒子里面