问题 何时在CSS中使用margin和padding

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

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

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

我认为下面的图表可以立即直观地了解差异。

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

MARGIN VS 填充 ：

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

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

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

对于您的问题有更多的技术解释，但如果您正在寻找一种方法 想一想 保证金和填充将帮助您选择何时以及如何使用它们，这可能会有所帮助。

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

• 该 浏览器窗口 就像墙一样。
• 该 内容 就像一张照片。
• 该 余量 就像框架图片之间的墙面空间一样。
• 该 填充 就像照片周围的垫子一样。
• 该 边境 就像一个框架上的边框。

在确定边距和填充之间时，使用它是一个很好的经验法则 余量 当你将一个元素与墙上的其他东西隔开时，和 填充 当你调整元素本身的外观时。边距不会改变元素的大小，但填充通常会使元素变大¹。

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

这是一些演示如何的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="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

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

就像你给的东西一样 {padding: 10px;}，你将不得不减少元素的宽度 20像素 保持'适合'而不是打扰周围的其他元素。

所以我通常首先使用填充来获取所有内容packed'然后使用边距进行小调整。

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

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

这意味着你的元素不知道它的外边距，所以如果你正在开发动态网页控件，我建议你尽可能使用填充和边距。

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

何时使用边距和填充

CSS中有两种方法可以在元素周围创建空间：边距和填充。在大多数使用场景中，它们在功能上是相同的，但事实上，它们的行为方式略有不同。在选择用于在页面周围移动元素的边距时，应考虑边距和填充之间的重要差异。然而，在边缘或填充可以用于相同效果的那些情况下，很多决定归结为个人偏好。

何时使用保证金

1. 您希望间距显示在由边框属性创建的“框”之外。边距位于边界之外，因此如果您希望边框位于一个位置，则可以使用它们。例如，如果您有一个带有边框的侧边栏，您希望远离主要内容区域，则此功能非常有用。

2. 您不希望背景颜色或图像侵入您的个人空间。背景颜色和图像停在边框处，因此如果您希望将背景保留在正在制作的空间之外，则边距是您想要的属性。

3. 您希望元素顶部和底部的可折叠空间。顶部和底部边距的行为与边缘不同，因为如果两个边距彼此叠加，它们会折叠到最大边距集的大小。例如，如果我将段落设置为20像素的上边距和15像素的下边距，我将在段落之间只有20像素的空间（两个边距相互折叠，最大的胜出） 。

何时使用填充

1. 您希望创建的所有空间都位于边框内。填充包含在您的边框内，因此将边框推离元素内部非常有用。

2. 您需要背景颜色/图像才能继续进入您正在创建的空间。您的背景将继续在您的填充后面，所以只有在您希望您的背景透视时才使用它。

3. 您希望顶部和底部空间的行为更加严格。例如，如果您将文档中的段落设置为20像素的顶部填充和15像素的底部填充，那么只要您连续有两个段落，它们实际上总共有35个像素的空间它们之间。