由于内部容器边缘，内部容器正在推动外部容器的位置

Question

row div 的 top/bottom 边距为 10px (margin: 10px 2px)。但是，10px 正在推动主容器的位置。我想要实现的是该行在 main-container 内有一个 top/bottom 边距。边距是一些如何转义和推动 main-container.

这是我的代码：

body {
    padding: 0;
    margin: 0;
}
.main-container {
    position: relative;
    display: block;
    width: 183px;
    height: 101px;
    background-color: red;
}

.row {
    position: relative;
    display: block;
    margin: 10px 2px;
    width: 175px;
    height: 15px;
    background-color: green;
}

<div class="main-container">
    <div class="row">
    </div>
    <div class="row">
    </div>
</div>

但是如果你运行这个代码（下面），没有 row div。您可以看到 main-container 的位置不同。这是 main-container 应该在的位置。

body {
    padding: 0;
    margin: 0;
}
.main-container {
    position: relative;
    display: block;
    width: 183px;
    height: 101px;
    background-color: red;
}

<div class="main-container">
</div>

我该如何解决这个问题？

Answer 1

您应该将 .main-container class 中的 position 更改为 position: absolute 而不是 position: relative。

相对定位会随着页面的流动移动元素，而绝对定位基本上会将其锁定在您设置的任何位置。相对定位更适用于 .row class，你想让它放在哪里取决于 .main-container class 的定位。当您不希望其他元素（特别是 parent 元素）确定其位置时，应使用绝对定位。

body {
    padding: 0;
    margin: 0;
}
.main-container {
    position: absolute;
    display: block;
    width: 183px;
    height: 101px;
    background-color: red;
}

.row {
    position: relative;
    display: block;
    margin: 10px 2px;
    width: 175px;
    height: 15px;
    background-color: green;
}

<div class="main-container">
    <div class="row">
    </div>
    <div class="row">
    </div>
</div>

This article 很好地解释了当 parent 和 child 都具有 position: relative 时您遇到问题的原因。如果将 parent 中的 position 完全去掉，您甚至不会注意到有什么不同。为什么？因为没有什么可以将它相对定位到。如果你把它从.rowclass中去掉，你会发现同样的结果。相对定位查找定位 不同于 static 的元素。在这种情况下，没有一个，所以它实际上没有做任何事情，因为默认情况下所有 parents（正文、html 等）都有 position: static。

body {
    padding: 0;
    margin: 0;
}
.main-container {
    display: block;
    width: 183px;
    height: 101px;
    background-color: red;
}

.row {
    position: relative;
    display: block;
    margin: 10px 2px;
    width: 175px;
    height: 15px;
    background-color: green;
}

<div class="main-container">
    <div class="row">
    </div>
    <div class="row">
    </div>
</div>

Answer 2

<div class="main-container">
    <div class="row">
    </div>
    <div class="row">
    </div>
</div>

body {
  padding: 10px;
  margin: 0;
}
.main-container {
  position: relative;
    width: 183px;
    height: 101px;
    background-color: red;
}

.row {
  position: relative;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  margin: 10px 0;
    width: 175px;
    height: 15px;
    background-color: green;
}

在https://codepen.io/3rdsty4bl00d/pen/OGbENg?editors=1100#0

中查看

由于内部容器边缘，内部容器正在推动外部容器的位置

Inner container is pushing the outer container's position due to inner container margin

html

css

position

margin