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

Posted 2023-03-06

【中文标题】由于内部容器边距，内部容器正在推动外部容器的位置[重复]

【英文标题】：Inner container is pushing the outer container's position due to inner container margin [duplicate]

【发布时间】：2019-08-30 05:08:21

【问题描述】：

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>

我该如何解决这个问题？

【参考方案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>

【讨论】：

但是为什么row会改变main-container的位置呢？ row 的边距在 inside main-container?它是如何逃脱main-container 的？ row 的边距应推动行位置 inside main-container

的范围

我已经为你添加了解释。 .main-container 类上的 position: relative 没有做任何事情。如果您完全删除它，您会注意到没有任何变化。并不是margin 在“逃避”main-container。这只是对position: relative 的滥用，导致定位没有变化。

@Ross 检查重复，都是关于边距折叠，无需更改位置。在这种情况下，更改位置是一个 hack，因为没有边距与 position:absolute

折叠

不一定是“黑客”，而是解决问题的众多可能解决方案之一。可以找到解决此问题的所有潜在解决方案here。

【参考方案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

【讨论】：

你知道为什么我的代码不起作用吗？我通常一直使用这种方法来定位我的内部 div 项，但由于某种原因，今天它坏了？

使用position: absolute; 和position: relative; 是有问题的。这就是我避免在 css 中使用位置的原因。使用带有网格布局的 flexbox 更容易，也不会那么麻烦。

有没有办法使用position: relative; 来完成这项工作？因为在我的实际代码中，当我使用网格时它搞砸了。我一直在使用相对定位。所以我的所有东西都设置在一个相对位置

检查这个新的 codepen 代码以获得您的答案。我希望这行得通。 codepen.io/3rdsty4bl00d/pen/OGbENg?editors=1100#0

我不是在取笑position: absolute; 和position: relative;。在设计网页时，它们真的很棒，而且非常有用。在我发现flex-box 和grid layout 之前，我曾经使用过这些职位。在我习惯了这些布局之后，我发现定位一个元素有点太多了。 Flex-box 和 Grid layout 确实让定位元素变得很容易。请不要误会我的意思。我并不是说这对代码不利。 @尼克