何时在CSS中使用margin和padding [关闭]

逆天伽罗宝儿2020-03-13

在编写CSS时，在决定何时使用margin和何时使用时应使用特定的规则或准则padding吗？

老丝猿Near2020/03/13 15:53:42

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

梅Tony2020/03/13 15:53:42

余量

边距通常用于在元素本身及其周围之间创建空间。

例如，我在构建导航栏时使用它，以使其贴在屏幕的边缘并且没有白色间隙。

填充

我通常在边框中有一个元素<div>或类似元素时使用它，并且我想减小其大小，但是当时我想保持周围其他元素之间的距离或边距。

简而言之，这是情况。这取决于您要做什么。

Sam蛋蛋Itachi2020/03/13 15:53:42

I always use this principle:

This is the box model from the inspect element feature in Firefox. It works like an onion:

Your content is in the middle.
Padding is space between your content and edge of the tag it is inside.
The border and its specifications
The margin is the space around the tag.

因此，更大的边距将在包含您的内容的盒子周围留出更多空间。

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

如果将其设置为特定值，则它们都不会增大或减小框的大小。

飞云Tom小宇宙2020/03/13 15:53:42

这是一些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>

Green达蒙2020/03/13 15:53:42

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

在此处输入图片说明

这意味着您的元素不知道其外部页边距，因此，如果要开发动态Web控件，建议您尽可能使用padding vs margin。

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

逆天Itachi2020/03/13 15:53:42

这是很好的了解之间的差异margin和padding。以下是一些区别：

边距是元素的外部空间，而填充是元素的内部空间。
边距是元素边框外部的空间，而填充是元素边框内部的空间。
保证金接受auto：的值margin: auto，但是您不能将padding设置为auto。
边距可以设置为任何数字，但填充必须为非负数。
在设置元素样式时，填充也会受到影响（例如背景色），但空白不会受到影响。

村村小小十三2020/03/13 15:53:42

要注意的一件事是，当自动折叠边距使您烦恼（并且您没有在元素上使用背景色）时，使用填充就更容易了。

老丝番长2020/03/13 15:53:42

高级保证金与填充说明

用padding空格分隔元素中的内容是不合适的。你必须利用margin上子元素来代替。较早的浏览器（例如Internet Explorer）会误解盒式模型，除非要使用margin它，否则它在Internet Explorer 4中可以完美运行。

有当使用两个例外padding 是适当的使用：

它应用于不能包含任何子元素（例如输入元素）的内联元素。
您正在补偿浏览器的一个高度杂项错误，供应商*咳嗽* Mozilla *咳嗽*拒绝修复该错误，并确定（在与W3C和WHATWG编辑器进行定期交流的程度上）您必须拥有一个可行的解决方案，并且该解决方案不会影响您要补偿的错误以外的其他任何内容的样式。

当您拥有100％宽度的元素时，padding: 50px;您可以有效获得width: calc(100% + 100px);。由于margin是不加入width也不会造成意想不到的布局问题，当您使用margin上child elements，而不是padding直接的元素。