CSS：margin-right和父元素 [英] CSS: margin-right and parent element

问题描述

在下面的例子中没有计算或考虑保证金的权利吗？当某人在 .box 上增加保证金时会发生什么情况？它没有效果。为什么？

.outer {width：500px;保证金：0汽车;背景：＃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 sumo nemo ullam！< / p> < / div>< / div>

解决方案

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

Is margin-right not calculated or taken into account in the following example? what happens when someone increases margin-right on .box? it has no effect. why?

.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>

解决方案

You have a margin: 50px declaration, which applies margins on all sides, as well as a width: 300px declaration. The values are over-constrained — since you can't expect a 300-pixel wide box to only have 50-pixel horizontal margins in a containing block whose width is greater than 300 + 50 + 50 pixels — which does indeed result in the specified value of margin-right being ignored (in the typical LTR writing mode).

这篇关于CSS：margin-right和父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！