「margin:0 auto」を指定するとmarginの相殺が起きない理由について

Question

ご回答者様

いつもお世話になっております。

「「margin:0 auto」を指定するとmarginの相殺が起きない理由」について教えていただけますと幸いです。

以下のコードを例にご質問させていただきます。

<div class="abc">
abc
</div>
<img class="img-responsive img_center midashi2_position" src="img/arrow_bg_b.gif">

.abc {
	background-color: antiquewhite;
}
.img-responsive {
	display: block;
}
.midashi2_position {
	margin-top: 100px;
}

＜Google Chromeの表示＞

画像が見にくくて恐縮ですが、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の表示＞


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の相殺が原因ではないのかもですが、この挙動の原因・理屈を教えていただけますと幸いです。

Answer 1

いわゆる「マージンの相殺」は、ある要素とその親要素の関係の話で、今回の話とは別件です。

そして、同じ要素に同じプロパティを重複して適用した場合、

1. 詳細度の高い順
2. 後からかけたほう

が優先となります。ということで、.img_centerも.midashi2_positionも詳細度は「クラス1個」で同じなので、後からかけたほうが優先されるはずですが…本当に順番は合っていますでしょうか。

Comments

[bah91929]

maisumakun様
早速のご回答ありがとうございます！
コードを確認すると順番が逆で、
.img_center {
margin: 0 auto;
}
が後ろにかかれていました。
初歩的なご質問で恐縮でございました。

この度はご回答くださり、ありがとうございました。

Answer 2

maisumakunさんのおっしゃる通り、後からかけたほうが優先になります。
その上で提示して頂いているデベロッパーツールの画像を見てると、

.img_center → 117行目
.midashi2_position → 112行目

つまり、.img_centerのほうが後ろになっているのが分かります。
提示しているソースでは、確かに.midashi2_position が後ろに来ているのですが、本当にソースそのままを載せたのか疑問が残ってしまいます。元のファイルを確認してみてください。

Comments

[kenreta]

解決されていたので、この回答は無しで笑

[maisumakun]

Developer Toolsに行数が出ていましたね、ありがとうございます。

[bah91929]

kenreta様
丁寧なご回答ありがとうございます。
行数が出ていました^^;
おかげさまで完全に解決いたしました１