何时在CSS中使用margin和padding

在编写CSS时，应该在决定何时使用margin以及何时使用padding时使用特定的规则或准则？

Answer 1

TL; DR： 默认情况下，我在任何地方使用保证金，除非我有边框或背景，并且想要增加可见框内的空间。

对我来说，填充和边距的最大区别在于垂直边距自动缩小，填充不能。 考虑两个元素，每个填充1em。 这个填充被认为是元素的一部分，并始终保留。 所以你将会得到第一个元素的内容，接下来是第一个元素的填充，接下来是第二个元素的填充，接下来是第二个元素的内容。 因此这两个元素的内容最终会相距2em。

现在用1em边距replace该填充。 边距被认为是在元素之外，相邻项目的边距将会重叠。 所以在这个例子中，你将会得到第一个元素的内容，后面跟着1em的组合边界，接着是第二个元素的内容。 所以这两个元素的内容相隔只有1em。

当你知道你想要在元素周围放置1em的空格时，这是非常有用的，而不pipe它旁边是什么元素。

另外两个不同之处在于填充包含在点击区域和背景颜色/图像中，但不包括边距。

Answer 2

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

• 使用保证金来区分外面的东西
• 使用填充将内容从块的边缘移开。

Answer 3

我所见过的最好的例子，图表，甚至是一个“自己试一试”的解释都在这里 。

下面的图表我认为可以直观的了解这种差异。

有一点需要记住的是符合标准的浏览器（ IE怪癖是一个例外 ）只渲染内容部分到给定的宽度，所以在布局计算中跟踪这一点。 另外请注意， 使用Bootstrap 3支持它，边界框会看起来有些复出 。

Answer 4

MARGIN vs PADDING ：

1. 在元素中使用边距来创build该元素和页面的其他元素之间的距离。 其中填充用于创build元素的内容和边框之间的距离。

2. 边距不是填充是元素一部分的元素的一部分。

请参考从保证金Vs填充 – CSS属性提取下面的图像

Answer 5

对于你的问题有更多的技术解释，但是如果你正在寻找一种方法来考虑利润和填充，这将帮助你select何时以及如何使用它们，这可能会有所帮助。

将块元素与挂在墙上的图片进行比较：

• 浏览器窗口就像墙壁一样。
• 内容就像一张照片。
• 边缘就像框架图片之间的墙壁空间一样。
• 填充就像照片上的垫子一样。
• 边框就像框架上的边框一样。

当在margin和padding之间做出决定时，在将元素与墙上的其他元素进行间隔时使用margin ，并在调整元素本身的外观时使用padding是一个很好的经验法则。 边距不会改变元素的大小，但填充通常会使元素变大¹ 。

¹ 可以使用box-sizing属性更改此默认框模型。

Answer 6

下面是一些HTML，演示了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="jquery-latest.js"></script> <div class="outer"> <div class="inner" style="position:relative; height:0px; width:0px"> </div> </div> 

Answer 7

关于边距的事情是，你不必担心元素的宽度。

就像当你给予{padding: 10px;}东西时，你必须减less20px的宽度，以保持“ 适合 ”，而不是打扰周围的其他元素。

所以我通常先使用填充来获得“ packed ”的所有内容，然后使用边距进行小的调整。

另外需要注意的是，在不同的浏览器上，填充更加一致，IE不会很好地处理负边距。

Answer 8

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

这意味着你的元素不知道它的外边缘，所以如果你正在开发dynamic网页控件，我build议你可以使用padding vs margin。

请注意，有时您必须使用保证金。

Answer 9

何时使用边距和填充

CSS中有两种方法可以在元素周围创build空间：边距和填充。在大多数使用场景中，它们在function上是相同的，但实际上它们的行为方式稍有不同。 在select使用哪些元素来移动页面上的元素时，应该考虑边距和填充之间的重要差异。 但是，在利润率和填充率都可以达到同样效果的情况下，很多决定归结为个人偏好。

何时使用利润率

1. 您希望您的间距出现在由边框属性创build的“框”之外。 边界位于边界之外，所以如果您希望边界留在一个地方，您可以使用它们。 例如，如果您有一个带边框的边栏，并且您希望从主内容区域移开，则此function非常有用。

2. 你不希望你的背景颜色或图像侵入你的个人空间。 背景颜色和图像在边界停止，所以如果您宁愿将背景放在您制作的空间之外，边距就是您想要的属性。

3. 你想在你的元素的顶部和底部可折叠的空间。 顶部和底部边距的行为与侧边的不同之处在于，如果两个边距彼此在顶部，则它们折叠到最大边距集合的大小。 例如，如果我设置段落的顶部边距为20像素，底部边距为15像素，那么在段落之间总共只有20个像素的空间总量（两个边距合并为一个，最大的合并为最大） 。

何时使用填充

1. 你想要创build的所有空间都在你的边界内。 填充包含在您的边框内，所以将边框从元素内部推开是非常有用的。

2. 你需要你的背景颜色/图像继续进入你创build的空间。 你的背景将继续在你的填充后面，所以只有在你想要背景的时候才能使用它。

3. 你希望你的顶部和底部空间performance得更加严格。 例如，如果将文档中的段落设置为具有20像素的顶部填充和15像素的底部填充，则每当您连续放置两个段落时，它们实际上将具有总共35个像素的空间它们之间。

Answer 10

有一点需要注意的是，当自动折叠页边空间让你恼火（而且你没有在你的元素上使用背景颜色）时，使用填充更容易一些。

Answer 11

不同部分的解释：

内容 – 文本和图像出现的框的内容

填充 – 清除内容周围的区域。 填充是透明的

边框 – 围绕填充和内容的边框

保证金 – 清除边界以外的区域。 保证金是透明的

这里是现场的例子：（改变价值玩弄） http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Answer 12

先进的保证金与填充解释

使用padding来在元素中间隔内容是不合适的; 您必须改为使用子元素上的margin 。 像Internet Explorer这样的老式浏览器会误解盒子模型，除非在Internet Explorer 4中使用完美的margin 。

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

1. 它应用于不能包含任何子元素（如input元素）的内联元素。

2. 您正在补偿供应商*咳嗽* Mozilla *咳嗽*拒绝修复并确定（与W3C和WHATWG编辑定期交stream的程度）的高度杂项浏览器错误，您必须拥有工作解决scheme，并且此解决scheme不会影响你正在补偿的bug的其他任何东西的样式。

当你有100％的宽度元素padding: 50px; 你有效地得到width: calc(100% + 100px); 。 由于未将width添加到width因此在child elements使用margin而不是直接在元素上进行padding时，不会导致意外的布局问题。

所以，如果你没有做这两件事情之一，不要为元素添加填充，而是直接添加子元素（或子元素），以确保在所有浏览器中获得预期的行为。

Answer 13

CSS边距，填充和边框是BOX MODEL属性。

保证金是内容之外的空白。 填充是内容中的空间。 边框是可见的轮廓（任何颜色，样式和宽度）外部填充。

总宽度=内容宽度+填充+边框。

Answer 14

很好理解margin和padding的区别。 有一些差异：

• 边距是元素的外层空间 ，Padding是元素的内层空间 。
• 边距是元素边界之外的空间，Padding是边界内的空间。
• 保证金可以是auto auto： margin: auto ，但是不能给Padding赋值auto。
• 保证金可以设置为任何数字，但填充必须是非负的。
• 当你devise一个元素的时候，它也会影响到填充空间（例如背景颜色），但不会影响边距。

Answer 15

首先让我们看看有什么不同以及每个责任是什么：

1）保证金

CSS边距属性用于生成元素周围的空间。
边距属性设置边界外的空白大小。 使用CSS，您可以完全控制边距。
有CSS属性用于设置元素的每一边（顶部，右侧，底部和左侧）的边距。

2）填充

CSS填充属性用于在内容周围生成空间。
填充将清除元素周围内容（边框内）的区域。
使用CSS，您可以完全控制填充。 有CSS属性用于设置元素的每一侧（顶部，右侧，底部和左侧）的填充。

所以简单地说边距是元素周围的空间，而填充是围绕元素内容的空间。

codemancers的这个图像显示了边缘和边界如何变得更大以及边框和内容框如何使它不同。

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

• 内容 – 它定义了文本，图像或其他元素的实际内容所在的框的内容区域。
• 填充 – 这将清除其包含框中的主要内容。
• 边框 – 包围内容和填充。
• 保证金 – 该区域定义了一个透明空间，将其与其他元素分开。

Answer 16

另一个关于保证金和Javascript填充的信息。

在JavaScript中你可以得到元素的高度。 如果你的元素有填充，你会得到正确的高度，但是如果你有边界或徘徊那些将被忽略。

所以在我的情况下，当我想通过计算页面的高度和减去高度/页脚来修复我的“内容”部分的最小高度来修复页脚的底部时，我添加将三部分一个div和使用填充来获取底部右侧的页脚，而没有像素滚动条，因为利润率。