marginによる挙動の仕組みがどのような理屈で動くのか知りたい

Question

    <section class="section1">
      <div class="txt-wrap">
        <div class="h2-wrap">
          <h2>フィットネス<span>ダイエット目的</span></h2>
        </div>
      </div>
      <div class="img">
        <img class="main-img" src="img/img-index-01.jpg">
      </div>
    </section>

.section1 {
  display: flex;
  align-items: center;
  max-width: 1280px;

}

.section1 .txt-wrap {
  flex: 0 1 50%;
  background: red;
  padding: 100px 0 150px 0;
  margin-right: -100px
}

.section1 .txt-wrap .h2-wrap {
  background: #fff;
  color: red;
  width: 98%;
  position: relative;
  z-index: 2;
  padding: 40px 20px;

}

.section1 .img {
  flex: 0 1 50%;
  position: relative;
}

.section1 .img .main-img {
  width: 110%;
  box-shadow: 0 0 3px #ddd;
}

.section1 .img .sub-img {
  position: absolute;
  bottom: 20px;
  left: -10px;
  z-index: 2;
  width: 50%
}

.imgにmargin-leftt:-100pxをつけると.imgが左に100pxずれるのはわかるのですが
.txt-wrapにmargin-right:-100pxをつけると.txt-wrapが右にずれるのではなく.imgが左に100pxずれるのはなぜでしょうか。

Comments

[H40831]

ブラウザにコードをコピペして試してみましたが、そのようにはなりませんでした。

[m.ts10806]

想定するブラウザご提示ください

Answer 1

ブラウザの開発ツールで style を変化させると、リアルタイムに変更が反映されるので非常に理解が進みます。
開発ツールの使い方を覚えると良いですよ。

Answer 2

>.txt-wrapにmargin-right:-100pxをつけると.txt-wrapが右にずれるのではなく.imgが左に100pxずれる

まず、ボックスが左揃えされている、という前提を確認してください。
そのため、左辺に変化がないので、当然に.txt-wrapの位置は変わりません。
そして、マージンとはボックス辺の余白のことです。マイナスの余白ということは、隣のボックスと重なる、ということです。
右辺が隣のボックスと重なるということは、.txt-wrapの右隣の要素である.imgが左寄せで寄ってくる、ということです。

---

もちろん、これが右寄せであれば逆の話になります。

.section1 {
	justify-content: end;
}

↑で試すと、.txt-wrapが右にずれるのが確認できると思います。

コメントを受けて追記

margin-leftの負の値を指定した時は.txt-wrapの位置左にずれるのはなぜ

左側の余白がマイナスということは、左側にあるものと重なるということです。
.txt-wrap の左隣には何もありませんが、キャンパスからその分がはみ出る形になり、左にずれます。

Comments

[退会済みユーザー]

まず、ボックスが左揃えされている、という前提を確認してください。
そのため、左辺に変化がないので、当然に.txt-wrapの位置は変わりません。

ということならば、margin-rightの負の値が上記の理屈であるならば、margin-leftの負の値を指定した時は.txt-wrapの位置左にずれるのはなぜでしょうか。

[Lhankor_Mhy]

** .txt-wrap に ** margin-leftの負の値を指定した時は.txt-wrapの位置左にずれるのはなぜ、ということですか？

[退会済みユーザー]

はい、そうです。

[Lhankor_Mhy]

追記しました。