margin和padding分别适合什么场景使用 - 什么时候在CSS中使用margin和padding




padding区别 什么时候用padding什么时候用margin (16)

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

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

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


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

  • 保证金是内容之外的空间。
  • 填充是内容中的空间。
  • 边框是填充外部的可见轮廓(任何颜色,样式和宽度)。

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


高级边距与填充说明

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

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

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

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

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

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


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


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


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


知道marginpadding之间的差异是很好的。 以下是一些差异:

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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

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

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

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


不同部分的说明:

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

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

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

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

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


余量

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

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

填充

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

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


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

1)保证金

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


2)填充

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

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

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

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

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

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

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

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

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

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


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

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

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


我总是使用这个原则:

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

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

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

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

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


除了toscho的回答,我还注意到Chrome 9-10和Safari 5之间的一些webkit不一致,支持的CSS属性值得注意。

特别是在为占位符设置样式时,Chrome 9和10不支持background-colorbordertext-decorationtext-transform

完整的跨浏览器比较在here





css padding margin