css - padding区别 - 什么时候用padding什么时候用margin




什么时候在CSS中使用margin和padding (12)

在编写CSS时,是否有一个特定的规则或指南应该用于决定何时使用margin以及何时使用padding


何时使用边距和填充

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

何时使用保证金

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

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

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

何时使用填充

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

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

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


余量

边距通常用于在元素本身与其环绕之间创建空间。

例如,当我构建导航栏使其粘在屏幕边缘并且没有白色间隙时,我会使用它。

填充

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

简而言之,它是情境化的; 这取决于你想要做什么。


MARGIN vs PADDING

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

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

请参考下面从Margin Vs Padding - CSS Properties中提取的图像


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

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

考虑两个元素,一个在另一个之上,每个元素的填充为1em 。 此填充被视为元素的一部分,并始终保留。

因此,您将得到第一个元素的内容,然后是第一个元素的填充,接着是第二个元素的填充,接着是第二个元素的内容。

因此,两个元素的内容最终将相差2em

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

因此,在此示例中,您将得到第一个元素的内容,后跟1em的组合边距,后跟第二个元素的内容。 所以两个元素的内容相差仅1em

当你知道要在元素周围说出1em的间距时,这非常有用,无论它在哪个元素旁边。

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


下面是一些HTML,演示了paddingmargin如何影响可点击性和背景填充。 对象接收对其填充的单击,但点击对象边距区域将转到其父级。

$(".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>


不同部分的说明:

内容 - 显示文本和图像的框的内容

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

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

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

以下是实例:(改变价值观) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel


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

就像你给出{padding: 10px;}东西一样,你必须将元素的宽度减少20px以保持“ 适合 ”而不会打扰周围的其他元素。

因此,我通常首先使用填充来使所有内容“ packed ”,然后使用边距进行小调整。

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


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

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

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

当在margin和padding之间进行判断时,当你将一个元素与墙上的其他东西间隔开时,使用margin是一个很好的经验法则,当你调整元素本身的外观时使用padding 。 边距不会改变元素的大小,但填充通常会使元素变大1

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


我见过的最好的例子,图表,甚至是“自己尝试”的视图都here

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

要记住的一件事是符合标准的浏览器( IE怪癖是一个例外 )只将内容部分渲染到给定的宽度,因此在布局计算中要跟踪这一点。 另请注意,边框有点像Bootstrap 3支持它。


有一点需要注意的是,自动折叠边距会让你烦恼(并且你没有在元素上使用背景颜色),这就更容易使用填充。


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

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


边距清除元素周围的区域(边框外),但填充清除元素内容(边框内)周围的区域。

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

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





margin