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

Question

这个问题在这里已有答案：

• CSS margin terror; Margin adds space outside parent element 5个答案

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查看