Question

这是代码：

<html>

<head>
  <title>The CSS Box Model</title>
</head>

<body>
  <section>
    <h1>An h1 inside of a section</h1>
  </section>
</body>

</html>

到目前为止，我所知道的是有一个Box模型。每个元素都是由Box模型组成的。盒子模型有4个部分：内容，填充，边框和边距。因此，在这部分代码中：

<section>
   <h1>An h1 inside of a section</h1>
</section>

此部分的内容实际上是代表它的h1的整个框+它的边距（h1的）。是这样吗

Answer 1

边距不视为元素的一部分。但是，它们被认为是元素的 box 的一部分，其中涉及框模型。就 HTML DOM 而言，该部分的内容由h1元素组成（元素间也有空格，但这只是拆分头发，您现在不必担心）。在布局中，该部分的框包含h1的框，方式几乎相同。那是最简单的表达方式。

但是，由于边距具有非常独特的行为（请参见Ilya Streltsyn的评论margin collapsing），而填充和边框通常比较简单且可预测，因此实际上不可能从边距的角度考虑边距元素的内容，而不是元素父元素内容的一部分。例如，“内容”是指您在布局中看到的在父级内部的任何内容，还是在父级子级元素的任何部分引用？这些子元素中哪些会与父元素一起折叠或溢出？这是事情很快变得令人困惑的地方。

Answer 2

由于元素{{3}}的奇怪行为，因此不将其视为元素的一部分。

所以，利润率下降基本上是什么。

默认情况下，元素之间的边距折叠
因此，如果一个元素具有margin-bottom: 50px，而下一个元素具有margin-top: 50px，则它们之间的间隔将是50px而不是100px
换句话说，他们共享相同的边距空间。

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

在上面的代码中，child元素的边距不是其中的一部分，而是parent元素宽度的一部分。
此外，只要父元素和第一个子元素相互接触，边距就会折叠。因此，如果元素中的第一个子元素为margin-top: 50px，父元素为margin-top:70px，则它们将合并并创建120px的总边距空间。
我们可以向父级添加填充，以防止父级的边距与子级的边距合并。

.parent{
    margin-top: 100px;
    padding:40px;
    background-color: green;
}
h1 {
  margin-top: 50px;
  margin-bottom: 40px;
  background-color: red;
}

h2 {
  margin-top: 40px;
  background-color: blue;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
</div>
</body>
</html>

边距是否被视为要素的一部分？

2 个答案: