html - 为什么任何 html 元素都需要 'padding' & 'border' ？

Question

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

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

--

margin 给出两个元素之间的空白。

为什么一个盒子需要三个边界？在任意两个框之间创建空白的 margin 是否不够？

Answer 1

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

虽然 margin 和 padding 确实都会创造空间，但它们创造空间的位置是有区别的。而这种差异就是边界。

边框，顾名思义，就是创建一个可见的边框。填充在所述边框和其中的内容之间创建空间。但是，例如，当元素具有背景时，填充也可用于在元素周围创建一些空间。

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

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

.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; 在元素之间创建同样多的空间，但您无法获得这种(* 咳嗽 *)漂亮的彩色显示。