css 边距_CSS基础知识：了解折叠边距

最新推荐文章于 2023-09-19 13:59:34 发布

daique1908

最新推荐文章于 2023-09-19 13:59:34 发布

阅读量274

点赞数

文章标签： css python css3 java html5

css 边距

元素是网页的组成部分-构建网站时，实际上是在“砌砖”元素。放置这些元素后，可以使用CSS调整它们的外观和位置。

为了将元素相对于其他元素正确放置在网页上，我们使用了填充和边距之类的东西。这些是：

填充：元素边框和内容区域之间的空间。
边距：元素边界与其相邻元素边界之间的空间

以下是使用Google Chrome浏览器的Web检查器可视化元素的填充和边距的方法：

这应该是足够清晰，但有一种情况，其中一个元素的邻居之间以及利润率将合并（或折叠）进入一个统一的空间；这样就无法正确判断它是谁的空间：

如果您已经编写HTML和CSS已有一段时间，那么这可能是在您自己的代码中发生的。如果您不知道幕后发生的事情，那可能会刺痛您！

为了正确理解它，我们需要从边际崩溃的意义开始。

什么是可折叠保证金？

好问题，很高兴你问。根据W3C ：

“在CSS中，两个或多个框（可能是也可能不是同级）的相邻边距可以合并为一个边距。以此方式合并的边距被称为崩溃，而合并的边距称为崩溃边距。” – W3C

让我们将这些单词一点一点地分开。

因此，“边际利润” 是彼此相邻的边距，它们可以合并形成一个边距。但这是否意味着所有相邻的边距都可折叠？答案是不！

在CSS中，相邻边距是满足某些规则的垂直边距。是的，你没看错！这意味着水平边距（ margin-left和margin-right ）不被视为相邻边距。此外，在某些情况下，垂直边距不被认为是相邻的。

让我们的一些情形可折叠的利润率确实发生了开始。

1.父元素和第一个孩子

在下面的代码示例中：

<div>Outside the parent</div>
<div class="parent">
  <p class="child">
    Here is a paragraph housed in the parent element
  </p>
</div>

第二个div是父级，它包含一个子级p 。如果我们对父级和第一个孩子应用margin-top属性，导致两个页边距都接触，则页边距将被折叠。

div {
  background: #3d8bb1 /* blue */;
}
.parent {
  margin-top: 30px;
  background: #49b293 /* green */;
  height: 150px;
}
.child {
  margin-top: 10px;
  background: #b03532 /* red */;
}

您可能希望在红色p元素正上方显示边距，从而在其上方给我们一片绿色。

但是，父级及其子级在其顶部边缘对齐，然后选择值较大的边距（ 30px ）来同时显示它们，较小的边距会折叠为0 。如果孩子有较大的值（例如50px ），则将其选择为它们上方的边距。

如果进行测量，您会看到孩子的边框和外部div之间的间隔为30px 。

负保证金值

如果两个边距都为负值，则如下所示：

.parent {
  margin-top: -30px;
  background: #49b293 /* green */;
  height: 150px;
}
.child {
  margin-top: -10px;
  background: #b03532 /* red */;
}

所选边距还是最大的，在这种情况下为-10px 。

但是，如果一个边距是负值，另一个边距是两个值，则将它们组合在一起：

.parent {
  margin-top: 10px;
  background: #49b293 /* green */;
  height: 150px;
}
.child {
  margin-top: -30px;
  background: #b03532 /* red */;
}

在这种情况下，将添加边距，这将使我们得到-20px的结果。

重要说明 ：在所有边距崩溃的情况下，都以完全相同的方式确定值。

2.父元素和最后一个孩子

正如你可能想象的，可折叠的利润还可以在发生之间的margin-bottom父元素和margin-bottom子元素。假设我们有如下所示HTML：

<div class="parent">
  <p class="child">
    Here is a paragraph housed in the parent element
  </p>
</div>
<div>Outside the parent</div>

样式如下所示：

.parent {
  margin-bottom: 30px;
  background: #49b293 /* green */;
  height: auto;
}
.child {
  margin-bottom: 10px;
  background: #b03532 /* red */;
  height: 100px;
}

将使用具有较大值的margin-bottom ，而另一个将被折叠为0 。此处的区别在于，必须将父级的高度设置为auto 。

3.相邻元素

在父元素内，当第一个子元素被应用margin-bottom到下一个元素并被应用margin-top时，将发生可折叠边距：

<div class="parent">
  <p class="first-child">
    Here is a paragraph housed in the parent element
  </p>
  <p class="second-child">
    This is the second child
  </p>
</div>

如果我们像这样应用margin-top和margin-bottom ：

.first-child {
  margin-bottom: 30px;
  background: #b03532 /* red */;
  height: 150px;
}
.second-child {
  margin-top: 20px;
  background: #da6f2b /* orange */;
  height: 100px;
}

以我们之前计算的相同方式，子元素边框之间的间隔将为30px ，而不是20px 。