marginを設定した時の挙動が意図した通りにならないのを解決したい

Question

   <div class="b">dv>
    </div>

.b {
  background: #999;
  width:auto;
  margin-right:-100px;
  word-wrap: break-word
}

width:auto;を設定すると margin-right:-100px;が効くのですが
width:100%;を設定すると margin-right:-100px;が効かなくなります。
width:100%;を設定すると margin-right:100px;が効かくなります。

width:auto;を設定すると margin-left:-100px;が効かなくなります。
width:auto;を設定すると margin-left:100px;は効きます。
width:100%;を設定すると margin-left:100px;が効き、
width:100%;を設定すると margin-left:-100px;も効きます。

なぜこのような動きになるのでしょうか。

あとwidth:100%;を設定すると margin-left:-100px;の時に画面の左側にスクロールしても移動できず代わりに右側に100px分要素が無くなっています。これもどういうことなのか教えていただきたいです。

Answer 1

https://teratail.com/questions/238253
に関連しますが。

width:auto;を設定すると margin-right:-100px;が効く

「制限しすぎ（"over-constrained"）」にならないため、効きます。

width:100%;を設定すると margin-right:100px;が効かくなります。

「制限しすぎ（"over-constrained"）」になるため、効きません。

width:auto;を設定すると margin-left:-100px;が効かなくなります。

当方の環境では再現しませんでした。width:auto;margin-left:-100px;は共に効いています。

width:auto;を設定すると margin-left:100px;は効きます。

width:100%;を設定すると margin-left:100px;が効き、
width:100%;を設定すると margin-left:-100px;も効きます。

これは説明不要かと思います。

width:100%;を設定すると margin-left:-100px;の時に画面の左側にスクロールしても移動できず代わりに右側に100px分要素が無くなっています

画面外にはみ出しています。ネガティブマージンの結果でキャンバスからはみ出した場合、多くのブラウザでその部分は表示されないようになっています。

Comments

[退会済みユーザー]

「制限しすぎ（"over-constrained"）になる条件というのはどんな時でしょうか。

ネガティブマージンの結果でキャンバスからはみ出した場合、多くのブラウザでその部分は表示されないようになっています。
ということの質問ですが、左は表示されず右側にはみ出した時には表示されるのはなぜでしょうか。

[Lhankor_Mhy]

> 「制限しすぎ（"over-constrained"）になる条件というのはどんな時でしょうか。

前の質問にも書いたと思うのですが、margin-left, border-left-width, padding-left, width, padding-right, border-right-width, margin-right がすべて'auto'以外である時です。

border-width, padding は'auto'になりませんので、実質的には、margin-left, width, margin-right がすべて'auto'以外である時、と考えてよいでしょう。