やったこと

webサービスを作るときに考えたことを垂れ流します

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」が使えなくなる、こんなルールがあるとは知りませんでした・・。