CSS：margin-right和parent元素

Question

以下示例中是否未计算或考虑保证金权利？当有人在 .box 上增加保证金时会发生什么？它没有效果。为什么呢？

.outer {
  width: 500px;
  margin: 0 auto;
  background: #9CF;
}
.box {
  width: 300px;
  background-color: #ffd900;
  margin: 50px;
}
p {
  background: #EEA458;
}

<div class="outer">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
      incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
  </div>
</div>

Answer 1

您有一个margin: 50px声明，它会在所有方面应用边距，以及width: 300px声明。这些值过度约束 - 因为您不能指望300像素宽的盒子在宽度大于300 + 50 + 50像素的包含块中只有50像素的水平边距 - 这确实会导致{{ 3}}（在典型的LTR写入模式下）。

Answer 2

此处，保证金正在崩溃。 确实有保证金，但你看不到。为了使其可见，我们需要添加overflow: hidden来重新计算并显示边距。

＆＃13;

＆＃13;

.outer {
  width: 500px;
  margin: 0 auto;
  background: #9CF;
  overflow: hidden;
}
.box {
  width: 300px;
  background-color: #ffd900;
  margin: 50px;
}
p {
  background: #EEA458;
}

＆＃13;

<div class="outer">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
      incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

将overflow: hidden应用于父级后，您也可以看到上边距和下边距。

由于您的margin-right: 50px;小于右侧空格的150px ，您无法看到正确的边距。

这是.box：

的当前盒子模型

Answer 3

如果您希望.box的背景可见，请使用padding代替margin：

.outer {
  width: 500px;
  margin: 0 auto;
  background: #9CF;
}

.box {
  width: 300px;
  background-color: #ffd900;
  padding: 50px;
}

p {
  background: #EEA458;
}

<div class="outer">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
      incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
  </div>
</div>