Question

row div的上下边距为10px（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

您应将position类中的.main-container更改为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。在这种情况下，没有一个，因此它实际上并没有做任何事情，因为默认情况下所有父母（正文，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中查看

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

2 个答案: