Question

每个html元素都是一个盒子形状元素。

每个框都被边界包围 - padding，border，margin。

-

margin在两个元素之间给出了空格。

为什么一个盒子需要三个边界？ margin会在任意两个方框之间创建空格吗？

Answer 1

你需要一个边框，因为有时候人们想要在元素之间有一个可见的边框，而不是空格。

你需要填充，因为人们想要内容和边框之间以及边框和下一个元素之间的空间。

Answer 2

这些属性中的每一个都控制着框的不同方面。

Margin

边距清除元素周围的区域（边框外）。该 margin没有背景颜色，完全是透明。可以更改顶部，右侧，底部和左侧边距独立使用单独的属性。速记保证金属性也可用于一次性更改所有边距。

Padding

填充清除内容（边框内）周围的区域一个元素。填充受到背景颜色的影响元件。可以更改顶部，右侧，底部和左侧填充独立使用单独的属性。简写填充属性也可用于一次更改所有填充。

Border

CSS边框属性允许您指定样式，大小和元素边框的颜色。

这三个属性共同为HTML元素的样式提供了极大的灵活性。如果您只有margin，那么您只能在元素之间创建空间。另外，padding使您能够在没有collapsing margins的元素之间创建“分离”。

以下是更多详情的参考资料： When to use margin vs padding in CSS

Answer 3

如果您还需要边框或某些填充，则不会。

虽然边距和填充都会创建空间，但创建空间之间存在差异。而这种差异就是边界。

正如文字所暗示的那样，边框是创建一个可见的边框。填充在所述边界与其内容之间创建空间。但是，填充也可用于在元素具有背景时围绕元素创建一些空间。

为了更好地说明差异，我将创建几个片段：

此代码段没有边框，边距或填充，因此没有间距。

.row {
  background: red;
}

.column {
  background: green;
}

.blue {
  background: blue; 
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

这个片段有边距，在元素周围留出一些空间，这很明显，因为背景颜色。

.row {
   background: red; 
}

.column {
  margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

此示例同时具有边距和边框，为您提供更广泛的着色选项以及更多空间。然而，你可能无法用不同的空间给不同的空间。

.row {
  background: red;
}

.column {
  margin: 10px;
  border: 5px solid purple;
  background: green;
}

.blue {
  background: blue;
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

最后一个例子说明了一切。如您所见，填充在框内，边框内创建空间。除此之外，您还可以看到元素的更多背景颜色。

.row {
  background: red;
}

.column {
  margin: 10px;
  border: 5px solid purple;
  padding: 20px;
  background: green;
}

.blue {
  background: blue;
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

虽然您可以使用margin: 35px;在元素之间创建尽可能多的空间，但您无法获得这个（*咳嗽*）色彩绚丽的画面。

Answer 4

边距和填充有两种不同的用途：

边距相互折叠，而填充没有。并排的两个元素，每个元素都有Session_Start，相隔10px。但如果他们改为margin: 10px，则相隔20px。编辑我错过了。我试图引用保证金崩溃，这有时发生在保证金最高点和保证金最低点。更多内容可以在这里阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing;以及其他讨论：When to use margin vs padding in CSS
应用边框时，将在边框内应用填充，将其推离元素。边距应用于边界。
padding: 10px等样式将应用于填充，但不适用于边距。
使用边距时，允许使用负值。填充不是这样。

来自MDN：

填充

填充区域延伸到填充物周围的边界。当内容区域上设置了背景，颜色或图像时，这将扩展到填充，这就是为什么您可以将填充视为扩展内容的原因。填充位于填充边缘内部，其尺寸为填充框宽度和填充框高度。

保证金

边界区域扩展边界区域，其中一个空区域用于将元素与其邻居分开。它是边缘边缘内的区域，其尺寸是边距框宽度和边距框高度。

Answer 5

元素不要求具有以上任何一项。你看到的只是关于元素的盒子模型的图解，它只是告诉你没有边距，填充或边框。

margin和padding之间的重要区别在于边距会将其他元素推离当前元素，而填充则定义元素内容与其元素之间的空间。概要

边境只是一个边界。它创建一条线作为元素之间的可视分隔符，并不是真正用于确定它们之间的间距。

对w3schools website给出了一个很好的解释。

为什么任何html元素都需要填充＆＃39; ＆安培; ＆＃39;边境＆＃39 ;?

5 个答案: