cssのネガティブマージンって難しくないですか？検索してもネガティブマージンを詳しく解説してるページも少なく未だ理解が乏しいです。
どこかネガティブマージンの理解が深まる参考となるものがあれば教えて頂けないでしょうか？
オススメの学習方法でも構いません。
マイナス指定するだけなんだけど？
逆かめはめ波みたいなもん
例えば、横400pxの画像を画面の左右中央に置きたい時、left:50%にすると画面中央になるが左基準なので、画像の左側面の位置が50％になり右に寄って見えてしまいます。そこでネガティブマーチンを発動させるのです。このネガティブマーチンは画像の横幅に対して、半分のサイズをマイナス(margin:-200px)させるとなんと言う事でしょう
まぁ、それも今や古い手法ですが。。
その方法は理解が出来ます。
どこが難しいんだろか。アホみたいに簡単だよ。マイナスつけりゃいいだけなんだし。
詳しく説明する必要がないからページが見つからないのだと思う。ちなみに、どのあたりを難しいと思っているの?ネガティブマージンだけに限ると、どのブラウザでも動作が保証されている安全なプロパティだし。比較的使いやすい部類だと思う。
リキッドレイアウトをネガティブマージンでやる方法を詳しく解説してるページを読んだのですが、よくわかりませんでした。。。
floatがあるとややこしくなりますか？
行き過ぎたのを戻すだけなんだもの。
上方向にネガティブマージンをすると、その要素が上へ移動。左方向にネガティブマージンをすると、その要素が左へ移動。右方向にネガティブマージンをすると、その要素が右へ移動。下方向にネガティブマージンをすると後続の兄弟要素が上へ移動。
ここまではあってますよね？
ullililiulとあったとして、liの左右に5pxパディングがあって、一番最初のliの左パディングと一番最後のliだけ右パディングを無くしたい場合はulのマージン左右に-5pxつけるんですよね？
これだと、左のマイナスマージンで右に5pxずれて、今度は右のマイナスマージンで左に5pxずれるから、結局元の位置に戻って変化がないように思われるのですが、どういう仕組みで左右のパディングが削られるのかわかりません。
左のマイナスマージンでは、「左」に5px移動します。右のマイナスマージンでは、floatなどで隣接する可能性のある次の要素が「左」に5px移動します。従って、見た目の結果としてはulの幅が10px減ったように見えるはずです。ただし、実際的に幅に変化はありませんし、左右のpaddingが削られるわけではないですよ。あくまで、プラスのマージンの逆の現象が起きるだけです。
ありがとうございます。コード書いて試して確認してみます！
右のネガティブマージンをした時に、その要素自体が右に移動した現象が昨日確認できてたのですが、普通は後続の（隣接した）要素が左方向に引っ張られるんですよね？
右にネガティブマージンを設定して、右に移動するのってどういう条件の時に起きるのでしょうか？
どのブラウザで検証されているのか分からないし、マージンの前に、ボックスモデルを検索して調べてみてください。
クロムの最新バージョンでやってます。ボックスモデルは理解してるつもりです。
ネガティブマージンは旧ブラウザ対応してなかったりするからおまり使わないけど、インデント1em、レフトパディング-1em的なのはよく使います。
逆じゃない？
逆かも…
むしろネガティブマージンは新旧ブラウザを通して、融通が効いたレイアウトを実現するために使うことが多いな。floatのmargin削りなんかが良い例。
みんなの回答 9 件
マイナス指定するだけなんだけど？
逆かめはめ波みたいなもん
例えば、横400pxの画像を画面の左右中央に置きたい時、left:50%にすると画面中央になるが左基準なので、画像の左側面の位置が50％になり右に寄って見えてしまいます。
そこでネガティブマーチンを発動させるのです。
このネガティブマーチンは画像の横幅に対して、半分のサイズをマイナス(margin:-200px)させるとなんと言う事でしょう
どこが難しいんだろか。
アホみたいに簡単だよ。マイナスつけりゃいいだけなんだし。
詳しく説明する必要がないからページが見つからないのだと思う。
ちなみに、どのあたりを難しいと思っているの?
ネガティブマージンだけに限ると、どのブラウザでも動作が保証されている安全なプロパティだし。比較的使いやすい部類だと思う。
行き過ぎたのを戻すだけなんだもの。
上方向にネガティブマージンをすると、その要素が上へ移動。左方向にネガティブマージンをすると、その要素が左へ移動。右方向にネガティブマージンをすると、その要素が右へ移動。下方向にネガティブマージンをすると後続の兄弟要素が上へ移動。
ここまではあってますよね？
ul
li
li
li
ul
とあったとして、liの左右に5pxパディングがあって、一番最初のliの左パディングと一番最後のliだけ右パディングを無くしたい場合はulのマージン左右に-5pxつけるんですよね？
これだと、左のマイナスマージンで右に5pxずれて、今度は右のマイナスマージンで左に5pxずれるから、結局元の位置に戻って変化がないように思われるのですが、どういう仕組みで左右のパディングが削られるのかわかりません。
ネガティブマージンは旧ブラウザ対応してなかったりするからおまり使わないけど、インデント1em、レフトパディング-1em的なのはよく使います。
関連するトピックス