margin-rightとmargin-topが効かずmargin-leftとmargin-bottomは効くのはなぜか理由が知りたい

Question

  <div class="top-wrap">
    <p>top</p>

  </div>

.top-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
}

.top-wrap:after {
  content: '';

  border-width: 60px;
  border-style: solid;
  border-color: transparent red red transparent;
  display: inline-block
}

.top-wrap p {
   margin-left: 60px;
  margin-bottom: -80px;
  position: relative;
}

margin-right: -60px;
margin-top: 80px;
とすると効かないのはなぜでしょうか。

Answer 1

margin-right: -60px;

margin-top: 80px;
とすると効かないのはなぜでしょうか。

ちゃんと効いています。画面右下に配置しているので分かりにくいので、真ん中に配置して、div と p に境界線を表示させると効いているのがよく分かります。

確認用サンプル

Pブロックが、右に 60pxはみ出して、上余白が80pxになっていますよね。
その代わり、上余白分、ブロックの高さが高くなっているので表示位置は変わりませんが。

Comments

[退会済みユーザー]

確かに効いていますね。しかしmargin-top: 80px;とするとtopの文字が下に８０px移動しないのはなぜなのでしょうか。

[hatena19]

親ブロックが bottom: 50%; で固定されいるからです。
確認用サンプルで margin-top を変化させてみてください。
底の位置は固定のまま高さが変化するのが確認できると思います。

次に top: 50%; に変更してmargin-top を変化させてみてください。
上辺が固定なので、pの位置が変わるのが確認できます。

[退会済みユーザー]

親ブロックが bottom: 50%;で固定というのはなぜそのようになってるのでしょうか。

[hatena19]

position: fixed;
bottom: 50%;
という設定が要素の底辺が画面の50%の位置に固定という意味なので。

https://developer.mozilla.org/ja/docs/Web/CSS/position

https://developer.mozilla.org/ja/docs/Web/CSS/bottom

まずは用語の意味を調べましょう。

[退会済みユーザー]

bottom:0という設定にしていますが。ちなみにこれをtop100%にしても位置が移動することができなかったのですが。

[hatena19]

top: 100% だと要素の上辺が画面の上から100%の位置ということになりますから、画面の外に出てしまいます。
親要素、子要素、after疑似要素がそれぞれ相対的に位置が決まりますので、その関係を理解してください。