由于内部容器边距，内部容器正在推动外部容器的位置[重复]

Question

row div 的顶部/底部边距为 10 像素 (margin: 10px 2px)。但是，10px 正在推动主容器的位置。我想要实现的是该行在main-container 内有一个顶部/底部边距。边距是如何逃避和推动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 类中的position 更改为position: absolute 而不是position: relative。

相对定位将随着页面的流向移动元素，而绝对定位本质上会将其锁定在您设置的任何位置。相对定位更适用于像 .row 类这样的情况，您想要它取决于.main-container 类的定位。当您不希望其他元素（特别是父元素）确定其位置时，应使用绝对定位。

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 很好地解释了当父母和孩子都拥有position: relative 时您遇到问题的原因。如果您将position 完全从父代中取出，您甚至不会注意到差异。为什么？因为没有什么可以相对定位它。如果将其从.row 类中删除，您会发现相同的结果。相对定位查找定位不同于 static 的元素。在这种情况下，没有一个，所以它并没有真正做任何事情，因为默认情况下所有的父母（body、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