提问



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

最佳参考


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


对我来说,填充和边距之间的最大区别是垂直边距自动折叠,填充没有。考虑两个元素一个在另一个上面,每个填充1em。这个填充被认为是一部分对于元素,并且始终保留。因此,您将得到第一个元素的内容,然后是第一个元素的填充,接着是第二个元素的填充,接着是第二个元素的内容。这两个元素最终会相差2em。


现在用1em边距替换该填充。边距被认为是在元素之外,并且相邻项目的边距将重叠。因此,在此示例中,您将得到第一个元素的内容,后跟1em的组合边距,后跟第二个元素的内容。所以两个元素的内容相差仅1em。


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


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

其它参考1


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



  • 使用边距将块与其外部的内容分开

  • 使用填充将内容物从块的边缘移开。





其它参考2


我见过的最好的例子,图表,甚至是自己尝试的观点都在这里。[26]


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





要记住的一件事是符合标准的浏览器(IE怪癖是一个例外)只将内容部分渲染到给定的宽度,因此在布局计算中要跟踪这一点。还要注意边界框看起来有些东西卷土重来,Bootstrap 3支持它。[27]

其它参考3


MARGIN vs PADDING :



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

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



请参考下面从边距和填充物中提取的图像 - CSS属性[29]




其它参考4


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


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



  • 浏览器窗口就像墙一样。

  • 内容就像一张照片。

  • 边距就像框架图片之间的墙面空间。

  • 填充就像围绕照片的消光。

  • 边框就像框架上的边框一样。



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


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

其它参考5


这里有一些HTML演示paddingmargin如何影响可点击性和背景填充。对象接收对其填充的点击,但点击对象边距d区域转到其父级。




$(".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;}的东西一样,你必须通过 20px 来减少元素的宽度,以保持适合并且不会打扰周围的其他元素它。


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


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

其它参考6


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





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


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

其它参考7


何时使用边距和填充



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


何时使用保证金



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

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

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



何时使用填充



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

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

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


其它参考8


不同部分的说明:


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


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


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


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


[31]


这是现场的例子:(改变价值观)
http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel[32]

其它参考9


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

其它参考10


高级保证金与填充说明


使用padding来空间元素中的内容是不合适的;你必须在子元素上使用margin。较旧的浏览器(如Internet Explorer)误解了盒子模型,除非使用margin在 Internet Explorer 4 中完美运行。


使用适合使用的padding 时有两个例外:



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

  2. 您正在补偿一个非常混杂的浏览器错误,供应商*咳嗽* Mozilla *咳嗽*拒绝修复并且确定(在与W3C和WHATWG编辑定期交流的程度上)您必须有一个可行的解决方案,这个解决方案不会影响你补偿的其他任何东西的样式。



如果你有padding: 50px;的100%宽度元素,你实际得到width: calc(100% + 100px);。由于margin 不添加到width,因此在child elements上使用margin而不是padding时不会导致意外的布局问题]]直接在元素上。


因此,如果你不做这两件事中的一件,那么不为元素添加填充,而是向它的直接子/子元素添加,以确保你重新获得所有浏览器中的预期行为。

其它参考11


首先让我们看看有什么不同,每个责任是什么:



   1)保证金


  CSS边距属性用于生成元素周围的空间。
  
边距属性设置外部空白区域的大小
  边境。使用CSS,您可以完全控制边距。

  用于设置元素每边边距的CSS属性
  (顶部,右侧,底部和左侧)。



点击



   2)填充


  CSS填充属性用于生成内容周围的空间。
  
填充清除内容(边框内)周围的区域
  一个元素。
使用CSS,您可以完全控制填充。那里
  是用于为元素的每一侧设置填充的CSS属性
  (顶部,右侧,底部和左侧)。



因此,边距只是元素周围的空间,而填充是内容周围的空间,属于元素的一部分。


[33]


来自代理人的这张图片显示了边距和边框是如何得到的以及边框和内容框如何使它变得不同。[34]


他们还定义了每个部分如下:



  

      
  • 内容 - 这定义了文本,图片或其他元素等实际内容所在的框的内容区域。

  •   
  • 填充 - 这会清除其包含框中的主要内容。

  •   
  • 边框 - 这会围绕内容和填充。

  •   
  • 保证金 - 此区域定义了一个透明空间,将其与其他元素分开。

  •   


其它参考12


CSS Margin,padding和border是Box Model属性。



  • 保证金是内容之外的空间。

  • 填充是内容中的空间。

  • 边框是填充外的可见轮廓(任何颜色,样式和宽度)。



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

其它参考13


很高兴知道marginpadding之间的差异。这里有一些不同之处:




  • 边距是元素的外部空间,而填充是元素的内部空间。


  • 边距是元素边界之外的空间,而Padding是边界内的空间。


  • 保证金接受auto:margin: auto的值,但您不能将Padding设置为auto。


  • 保证金可以设置为任何数字,但填充必须是非负数。


  • 为元素设置样式时,它也会影响填充(例如背景颜色),但不影响边距。


其它参考14


我总是使用这个原则:


[35]


这是Firefox中inspect元素功能的盒子模型。它像洋葱一样工作:



  • 您的内容位于中间。

  • 填充是您的内容与标记边缘之间的空格
    内部。

  • 边框及其规格

  • 边距是标签周围的空间。



如此大的利润空间将在包含您内容的盒子周围留出更多空间。


较大的填充将增加内容与其内部框之间的空间。


如果设置为特定值,它们都不会增加或减小框的大小。

其它参考15


保证金



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


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


填充



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


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

其它参考16


保证金在盒子外面,填充物在盒子里面