边距和填充之间的区别？
边界和填充在CSS中的区别究竟是什么？ 这似乎没有太多的目的。 你能给我一个例子，说明差异在哪里（以及为什么知道差异是重要的）？
padding是内容和border之间的空间，而margin是边界之外的空间。 这是我从Google快速search中find的一张图片，用以说明这个想法。
在这里的答案中缺less一个关键的东西：
顶部/底部边缘是可折叠的。
因此，如果您在元素的底部有20px的边距，下一个元素的顶部有30px的边距，则两个元素之间的边距将是30px，而不是50px。 这不适用于左/右边距或填充。
保证金应用于你的元素的外部 ，从而影响你的元素距离其他元素的距离。
填充应用于元素的内部 ，从而影响元素的内容远离边界的距离。
此外，使用边距不会影响你的元素的尺寸，而填充会使你的元素的尺寸（设置高度+填充），例如，如果你有一个100x100px的div 5 px填充，你的div实际上是105x105px
最简单的辩护是; 填充是在容器元素的边界内给出的空间，边界在外部给出。 对于一个不是容器的元素来说，填充可能没什么意义，但是保证金会有助于安排它。
填充
填充是一个CSS属性，它定义了元素内容和边框之间的空间（如果有边框）。 如果一个元素在其周围有一个边框，则填充将从该边框给出出现在该边框中的元素内容的空间。 如果元素周围没有边框，则添加填充对该元素没有任何影响，因为没有边框来给出空间。
余量
页边距是一个CSS属性，用于定义元素的外部空间到下一个外部元素的空间。
保证金影响既有或没有边界的元素。 如果元素具有边框，则边距将定义从该边框到下一个外部元素的空间。 如果一个元素没有边框，那么margin就定义了从元素内容到下一个外部元素的空间。
填充和保证金的区别
因此，边距和填充的区别在于，填充处理内部空间时，边距处理外部空间到下一个外部元素。
记住这三点：
- 保证金是控制权的附加空间。
- 填充是控制中的额外空间。
- 外部控制的填充是内部控制的边际 。
演示图像:(红色框是欲望控制） 
填充是边界内的空间，而边界是边界外的空间。
边距=从边界向外的元素（外部）。
padding =从文本到边框的元素（内部）。
看到这里： http : //jsfiddle.net/robx/GaMpq/
保证金是箱子外的空间; 填充是框内的空间。 很难看出白色填充物的区别，但是用彩色填充物可以看到它很好。
任何答案都没有提到保证金和填充之间的主要区别之一：可点击性和hover检测
增加填充增加了元素的有效大小。 有时候，我有一个小图标，我不想让它看起来更大，但是用户仍然需要与这个图标进行交互。 我增加了图标的填充，使其具有更大的点击和hover空间。 增加图标的边距不会有相同的效果。
关于这个话题的另一个问题的答案举了一个例子。
边距和填充都是真正的填充types。一个（边距）位于元素边界之外，与其他元素保持距离，另一个（填充）位于元素内容之外，以将内容与元素边界保持距离。
填充允许开发人员保持文本和封闭元素之间的空间。 边距是元素用父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>
知道margin和padding的不同之处是很好的。 他们有一些分歧：
- 边距是元素的外层空间 ，Padding是元素的内层空间 。
- 边距是元素边界之外的空间，Padding是边界内的空间。
- 保证金可以是auto auto：
margin: auto，但是不能给Padding赋值auto。 - 保证金可以给正值或负值（或零），否则，填充必须是正值（或零）。
- 在导航栏或锚（链接）中，填充是接受更改的元素的一部分。 当你devise一个元素时，变化不会发生在Margin上，但是Padding创build的空间将会改变。
提示 ：您可以在一些用于控制其他标签的标签上看到这些差异; 像div和span，或者section和article。 也很高兴看到导航栏的变化。
注 ：我不知道这种差异的原因。 所以你应该从CSS的开发者那里问这个问题！
看到关于另一个问题的主要答案
有一个很好的编码！
尝试在宽度和高度的块div上放置背景颜色。 你会看到填充增加了元素的大小，而margin只是将它移动到文档stream中。
保证金专门用于移动元素。
有一个重要的区别：
边距 – 位于元素的外部，即，元素开始之后，将会应用空白移位。 填充是在内部，另一个将在元素开始之前应用空白。
保证金应用于你的元素的外部，从而影响你的元素距离其他元素的距离。
填充应用于元素的内部，从而影响元素的内容远离边界的距离。
此外，使用边距不会影响你的元素的尺寸，而填充会使你的元素的尺寸（设置高度+填充），例如，如果你有一个100x100px的div 5 px填充，你的div实际上是105x105px
填充是网页上最近的组件之间的空间，边距是网页页边距的空间。
基本上，填充和边距之间的区别来自背景。 填充将决定内容之间的空间，而边距决定元素的外部边缘！
填充是你的内容和边界之间的空间。 边缘是边界与其他要素之间的空间。
