保证金和填充之间的区别？

268

在CSS中，保证金和填充究竟有什么区别？它似乎并没有达到很多目的。你能否给我一个例子，说明差异在哪里（以及为什么知道差异很重要）？保证金和填充之间的区别？

2011-05-11 maclunian

+11

http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css http://stackoverflow.com/questions/3060456/difference-bw-padding边距http：// stackoverflow。com/questions/4619899 /差别之间的意见填充和边缘首先三个链接搜索'填充vs边距'。我认为我们需要在搜索栏中添加箭头并使其变绿。 – William 2011-05-11 02:52:16

这可能会帮助您了解差异http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html – lkamal 2013-11-09 12:06:16

也请注意，Internet Explorer以不同的方式将边距/边框/填充宽度相加（在默认非怪癖模式下）比几乎所有其他浏览器。 – 2014-05-01 15:54:42

最简单的辩护是; 填充是在容器元素的边界内给出的空间，边界是在外部给出的。对于不是容器的元素，填充可能没有多大意义，但边距有利于排列它。

来源

2010-06-17 12:53:43

margin =从边框向外的元素（外部）。

padding =从文本到边框的元素周围（内部）。

在这里看到：http://jsfiddle.net/robx/GaMpq/

来源

2011-05-11 02:51:26 robx

保证金是外箱空间; 填充是框内空间。很难看出它与白色填充物的区别，但用彩色填充物可以很好地看到它。

来源

2011-05-11 02:51:51

312

padding是内容和border之间的空格，而margin是边界之外的空格。这是我从快速Google搜索中找到的一张图片，它说明了这个想法。

enter image description here

来源

2011-05-11 02:52:17 abcd

也请查看这些网站以获取定义。但图形是一个完美的例子。 http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp – Suroot 2011-05-11 02:53:32

@maclunian：同时看看这个网站http：//www.w3schools .com/css/css_boxmodel.asp以及@ Suroot上面的链接。 – abcd 2011-05-11 02:58:05

这与内容的宽度和高度有何关系？在这一切上测量的是哪里？ – Nyerguds 2016-09-27 08:28:05

尝试把一个背景颜色上与宽度和高度的块DIV。您会看到填充会增加元素的大小，而边距只是将其移动到文档的流程中。

保证金专门用于移动元素。

来源

2011-05-11 02:52:36 Henry

将边距应用于之外的因此影响元素距离其他元素的距离。

填充用于里面的元素因此影响元素的内容离边界有多远。

此外，使用保证金不会影响元素的尺寸，而填充会让你的元件的尺寸（设定高度+填充），因此，例如，如果你有一个5像素填充一个100x100px DIV，你的DIV实际上是105x105px

来源

2011-05-11 02:54:05 LostLin

+11

我相信填充应用到每一个方面，所以该元素将110x110px – 2013Asker 2013-07-22 07:21:14

埃姆，据我所知填充不如果宽度已被设置为'auto'其他任何更改元素的宽度。如果宽度是'auto'，那么额外的填充将相应地增加填充元素的宽度（并且从@ 2013Asker提到的双方都是这样） – Flater 2014-05-22 12:28:21

我认为它有点误导地说你div将110px乘以110px，因为宽度你的div仍然是100px（假设box-sizing被设置为内容框）。 – wmock 2016-02-02 04:41:43

有一个重要的区别：

边缘 - 位于元素的外部，即一个将在元素开始之后应用空白移位。填充 - 在内部，另一个将在元素开始之前应用空白。

来源

2011-05-11 03:04:11 Ars

将边距应用到您的元素的外部，从而影响您的元素远离其他元素的距离。

填充应用于元素的内部，从而影响元素的内容远离边界的距离。

此外，使用保证金不会影响元素的尺寸，而填充会让你的元件的尺寸（设定高度+填充），因此，例如，如果你有一个5像素填充一个100x100px DIV，你的DIV实际上是105x105px

来源

2013-02-28 16:54:43

你注意到这个答案已经被给出了吗？ - 并加入了适当的重点？ – JerryOL 2013-07-14 17:05:00

边距和填充都是真正的填充类型。一个（边距）超出了元素边界的距离，使它与其他元素保持距离，另一个（填充）超出了元素的内容，从而使内容与元素保持距离边境。

来源

2013-04-02 11:47:59 chunkyboy

是在这里的答案缺少一个关键的事情：

上/下边距是可折叠的。

因此，如果您在元素的底部有20px的边距，下一个元素的顶部有30px的边距，则两个元素之间的边距将为30px而不是50px。这不适用于左/右边距或填充。

来源

2013-06-17 22:02:41 Nathan

请注意，非常特殊的情况下，垂直边缘会崩溃 - 不仅仅是任何两个垂直边缘都会这样做。这使得它更容易混淆（除非你非常熟悉盒子模型）。 – BoltClock 2016-05-08 17:20:12

记住以下3点：

的保证金是多余的空间周围控制。
填充是额外的空间里面的控制。
填充外部控件是内部控件的边距。

演示图片：（其中，红色框是欲望控制）

来源

2013-12-24 05:27:13 sms247

填充是在网页上最近的组件之间的空间和余量是从网页的余量空间。

来源

2014-01-15 05:48:16

-1

基本上，填充和边距之间的区别来自背景。填充将决定内容之间的空间，而边距决定元素的外部边缘！

来源

2014-07-16 15:20:50

填充允许开发人员在文本和它的封闭元素之间保留空格。边距是元素用父DOM的另一个元素维护的空间。

参见例如：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UT-8"> 
    <title>Pseudo Elements</title> 
    <style type="text/css"> 
     body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;} 
     .page 
     { 
      background-color: #fff; 
      padding: 10px 30px 50px 50px; 
      margin:30px 100px 30px 300px; 
     } 
    </style> 
</head> 
<body> 
    <div class="page"> 
     Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div> 
</body>

来源

2014-07-27 06:27:23 Rajat

填充是空间内部边界，而保证金是空间外的边界。

来源

2014-11-19 14:10:54

填充

填充是定义一个元素含量和它的边界之间的空间（如果它有一个边框）CSS属性。如果元素周围有边框，则填充将从该边框给出出现在边框中的元素内容的空间。如果一个元素周围没有边框，那么添加填充对该元素根本没有影响，因为没有边框可以给出空间。

保证金

保证金是定义元件的外部的空间至其下一个外部元件的CSS属性。

保证金会影响具有或不具有边框的元素。如果元素具有边框，则边距将定义从此边框到下一个外部元素的空间。如果某个元素没有边框，则边距将定义从元素内容到下一个外部元素的空间。

差分padding和margin

之间，从而margin和padding之间的差异在于，虽然填充涉及的内部空间，与外空间到下一个外部元件余量交易。

来源

2015-01-20 12:12:57

哪些元素没有边框？ – 2017-02-05 14:25:23

-6

填充是您的内容和边框之间的空间。其中边距是边框与其他元素之间的距离。

来源

2015-07-28 09:05:07

边距并不是那么简单，这并不能说明任何十几个前面没有提到的答案。 – Quentin 2015-07-28 09:08:06

你刚刚重复以前的答案。 – 2015-07-28 09:08:54

此答案已经在上面发布。 – Bruce 2015-07-28 09:10:15

之一边距和填充之间的主要区别是不以任何的答案中提到：可点击和悬停检测

增加填充增加了元件的有效尺寸。有时候我有一个小图标，我不想让它看起来更大，但用户仍需要与该图标互动。我增加了图标的填充，使其具有更大的点击和悬停空间。增加图标的边距不会有相同的效果。

An answer关于这个话题的另一个问题举了一个例子。

来源

2016-05-08 17:09:02 Paul

最顶级的答案是指填充是部件和利润是它的“外”，这意味着已经填充贡献较大的点击区域的“内部”。当你处理一个完全透明的盒子时，它并不是那么明显，但是...... – BoltClock 2016-05-08 17:16:11

很高兴知道margin和padding之间的差异。据我所知：

保证金是元素的外层空间，而填充是一个元素的内部空间。换句话说，margin是元素边界外的空间，padding是边界内的空间。
您可以将auto值设置为保证金。但是，不允许填充。 See this。
注意：使用margin: auto将块元素水平放置在其父元素的中间。
保证金可以是任何浮动数字，但填充不能是负数。
当你设计一个元素的样式时，padding也会被设置样式;但不是保证金。边距获取父元素的样式。例如，将background-color属性设置为黑色时，其内部空间（即填充）将为黑色，但不是其外部空间（即边距）。

来源

2016-06-13 17:43:12 MAChitgarha

保证金和填充之间的区别？

回答

相关问题