今更ながら気づいたブロック要素の仕様

下記のようなhtmlとスタイルシートがあるとします。

<style>
.wrap1 {
	background-color:red;
	height:500px;
}

.wrap2 {
	background-color:green;
	height:300px;
}
.wrap3{
	background-color:blue;
	color:#fff;
	text-align:center;
}
</style>

<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      abc
    </div>
  </div>
</div>

結果はこうなります。
2015-11-20_010848

それではwrap3クラスに対して「margin-top:30px」と追加した場合どうなるか。

こんな感じを予想した人が多いのではないでしょうか?

2015-11-20_011006

しかし、実際にはこうなります。

2015-11-20_011107

通常marginは親要素に対して効くのですが、親要素とmarginをかけたい方向の辺が重なっている場合(今回の例では上辺が重なっていた)、その親のさらに親の要素に対して効くようです。もちろんその親も重なっていれば、さらに上位になります。

親と子の間にスペースを作りたい場合は親のpaddingを使うと思いますので、あまり気にするようなケースはないかもしれませんが、はまると結構悩みますので、ご注意ください。


コメント投稿は締め切りました。