CSS中父级的保证金溢出

Question

每当我为任何元素添加余量时，我都会溢出，我尝试添加box-sizing，position：relative。但没有任何作用

在谷歌上搜索但似乎没有任何帮助我

任何人都可以知道为什么会这样吗？

Sample Image

Answer 1

边距是外元素。处理问题的一种方法是在width上使用padding，如下面的代码段所示。

请注意，边距与填充不同：.x { box-sizing: border-box; margin: 30px; width: calc(100% - 60px); background: yellow; border: 5px solid red; } 内部边框（因此它包含在背景颜色所覆盖的区域内），边距外部< / EM>：

＆＃13;

＆＃13;

<div class="x">margin....</div>

＆＃13;

padding

＆＃13;

＆＃13;

＆＃13;

使用margin代替.x { box-sizing: border-box; padding: 30px; width: 100%; background: yellow; border: 5px solid red; }，这将是：

＆＃13;

＆＃13;

<div class="x">Padding....</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您不能将余量添加到作为您容器的兄弟的div，否则它会创建溢出。改用填充。查看边距示例中的文本如何移动文本。

＆＃13;

＆＃13;

<div class="parent">
  <div class="padding-example">Correct</div>
</div>
<hr>
<div class="parent">
  <div class="margin-example">Wrong</div>
</div>

＆＃13;

calc

＆＃13;

＆＃13;

＆＃13;