質問: ご回答者様 いつもお世話になっております。 「「margin:0 auto」を指定するとmarginの相殺が起きない理由」について教えていただけますと幸いです。 以下のコードを例にご質問させていただきます。 ``` abc ``` ``` .abc { background-color: antiquewhite; } .img-responsive { display: block; } .midashi2_position { margin-top: 100px; } ``` <Google Chromeの表示> ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8be881d9ca77f53ac158a763cb207fcf.png) 画像が見にくくて恐縮ですが、abcとimgの間にmargin-top: 100px;の余白が確保されています。 しかし、ここでimgに「margin:0 auto」を指定すると以下のようなブラウザ表示となります。 ``` .abc { background-color: antiquewhite; } .img-responsive { display: block; } .img_center { margin: 0 auto; } .midashi2_position { margin-top: 100px; } ``` <Google Chromeの表示> ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0687acf769346014375fdb8da8237323.png) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/06244901a8624e8d2e63979e7db51226.png) abcとimgの間にmargin-top: 100px;の余白が確保されず(打ち消され)、abcとくっついた状態となっております。 おそらく、 .img_center { margin: 0 auto; } と .midashi2_position { margin-top: 100px; } のmarginの相殺が影響しているのかなと考えましたが、相殺は値の大きい方を採用(マイナスの場合は別の挙動)するようですし、 marginの初期値は0のため、なぜmarginの上下0とmargin-top: 100pxでmarginの相殺が起きるのか、調べても分からない状況です。 もしかすると、marginの相殺が原因ではないのかもですが、この挙動の原因・理屈を教えていただけますと幸いです。
回答: maisumakunさんのおっしゃる通り、後からかけたほうが優先になります。 その上で提示して頂いているデベロッパーツールの画像を見てると、 !イメージ説明 .img_center → 117行目 .midashi2_position → 112行目 つまり、`.img_center`のほうが後ろになっているのが分かります。 提示しているソースでは、確かに`.midashi2_position`が後ろに来ているのですが、本当にソースそのままを載せたのか疑問が残ってしまいます。元のファイルを確認してみてください。