margin-rightが効かないのを解決したい

Question

    <div class="box">
      <div class="a">
        a
      </div>
      <div class="b">b</div>
    </div>


```
```css
.box {
  background: red;
  width:100%;
  height: 200px;
  position: absolute;
  color: #fff

}

.a {
  background: #333;
width: 100%;
  margin-left: -100px

}

.b {
  background: #999;
width: 100%;
  margin-left: 100px
}
```

margin-keftは効くのでこの違いはなぜなのか知りたいです。

Answer 1

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
（略）
If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true.

10.3.3 Block-level, non-replaced elements in normal flow | Visual formatting model details

勝手訳：
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含ブロックの幅
（略）
上記すべてが'auto'以外である場合, それらの値は「制限しすぎ（"over-constrained"）」と呼ばれ、そのうち一つは設定された値と違う値が取られます。もし'direction'プロパティが'ltr'であるなら、'margin-right'の設定値は無視され、上記等式が成り立つように計算されます。

---

ということなので、ご提示のコードについてwidth: 100%;をwidth: auto;などとすれば、お望みの結果になるのではないかと思います。

Comments

[退会済みユーザー]

上記すべてが'auto'以外と言いますが、'border-left-width' + 'padding-leftは設定していないのですが。widthをautoにしなければならないのでしょうか。

[Lhankor_Mhy]

「ご提示のコードについてwidth: 100%;をwidth: auto;**など**とすれば」と書きました。

なので、「widthをautoにしなければならない」という意図の回答ではありません。

[退会済みユーザー]

padding-leftを試しにautoにしましたが、margin-rightは効かなかったのですが。widthをauto以外での解決策はありますか。あるのであれば教えてください。

[Lhankor_Mhy]

margin-left: auto;
または
direction: rtl;
です。

margin-left: auto; が効くのは、マイナスマージンだけです。
direction: rtl; は包含ボックスに当ててください。