box-shadowを使うと内側の要素のmarginが効かなくなる!
cssの「box-shadow」を使ってdiv要素に影を付けてみたんです。
↓こんな感じのcss設定です。
.test-div { width: 100px; height: 100px; box-shadow: 0 2px #ff0000; }
この「test-div」の中に「p要素」で文章を書いて、p要素を「margin-top」で高さを調整しようとしたのですが上手くいきません。
/* css */ .test-p { margin-top: 10px; }
/* html */ <div class="test-div"> <p class="test-p">ふごああああああああ!</p> </div>
この設定をすると、不思議なことに内側の「test-p」ではなくて外側の「test-div」にマージンが設定されたような挙動をしてしまうのです。
仕方がないので「margin-top」を使うのはやめにして、外側のdivに「padding-top」を設定することで対処しました。
/* css */ .test-div { padding-top: 10px; }
「box-shadow」を使うと内側の要素の「margin」が使えなくなる、こんなルールがあるとは知りませんでした・・。