何时在CSS中使用margin和padding

Question

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

Answer 1

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

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

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

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

因此,这两个元素的内容最终会2em分开.

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

因此,在此示例中,您将得到第一个元素的内容,后跟1em合并边距,后跟第二个元素的内容.所以这两个元素的内容只是1em分开的.

当你知道你想要说1em一个元素周围的间距时,无论它旁边是什么元素,这都非常有用.

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

Answer 2

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

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

Answer 3

我见过的最好用例子,图表,甚至是"自己尝试"的视图来解释这个问题就在这里.

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

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

Answer 4

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

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

• 该浏览器窗口就像是在墙上.
• 的内容是一样的照片.
• 该保证金就像框架图画之间的墙壁空间.
• 该填充就像围绕着照片抠图.
• 该边界就像一个框上的边框.

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

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

Answer 5

MARGIN vs PADDING:

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

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

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

Answer 6

来自https://www.w3schools.com/css/css_boxmodel.asp

不同部分的说明:

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

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

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

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

实例(通过更改值来玩):https: //www.w3schools.com/css/tryit.asp？filename = trycss_boxmodel

Answer 7

下面是一些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>

Answer 8

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

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

因此,我通常首先使用填充来获取所有内容packed,然后使用边距进行微调.

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

Answer 9

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

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

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

Answer 10

这是很好的了解之间的差异margin和padding.以下是一些差异:

• 边距是元素的外部空间,而边距是元素的内部空间.

• 边距是元素边框外的空间,而边距是边框内的空间.

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

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

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

Answer 11

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

Answer 12

高级边距与填充说明

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

有在使用两个例外padding 是适当的使用方法:

1. 它应用于内联元素,该元素不能包含任何子元素,例如输入元素.

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

如果你有一个100%宽度的元素,padding: 50px;你有效地获得width: calc(100% + 100px);.由于margin是不添加到width它,当你使用不会造成意想不到的布局问题margin上child elements,而不是padding在元素上直接.

因此,如果你没有做这两件事中的一件,就不要在元素中添加填充,而是添加直接的子/子元素,以确保你将在所有浏览器中获得预期的行为.

Answer 13

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

1)边距

CSS边距属性用于生成元素周围的空间.
边距属性设置边框外的空白区域的大小.使用CSS,您可以完全控制边距.
有一些CSS属性可用于设置元素每一边的边距(顶部,右侧,底部和左侧).

2)填充

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

所以简单地说边缘是元素周围的空间,而填充是内容的空间,它是元素的一部分.

来自代理人的图像显示了边距和边框是如何得到的以及边框和内容框如何使它变得不同.

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

• 内容 - 这定义了框的内容区域,其中包含文本,图像或其他元素等实际内容.
• 填充 - 这将清除其包含框中的主要内容.
  
• 边框 - 它包含内容和填充.
• 边距 - 此区域定义了一个透明空间,将其与其他元素分开.

Answer 14

我总是使用这个原则:

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

• 你的内容在中间.
• 填充是内容与其内部标记边缘之间的空格.
• 边界及其规格
• 边距是标签周围的空间.

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

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

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

Answer 15

余量

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

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

填充

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

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