エンジニアのひよこ_level10

毎日更新してた人。たまに記事書きます。

【CSS】なぜ2つのdivの両方にmarginあると片方しか適応されない?【477日目】

注意

個人見解書いています!

CSSで幅を調整したい

<div class=high">xxx</div>
<div class=low">xxx</div>
.high {
    margin: 10px;
}
.low {
    margin: 20px;
}

結果、20pxになってる?

どうやら、lowのmarginしかきいてない?隙間が30pxになると思っていたら・・・

なんでだろう?

結論は仕様、でも用途は?

まあそういうものだと思うしかないのですが、marginが片方だけだと嬉しいときがあります。

.high {
    margin: 100px;
}
.low {
    margin: -100px;
}

もしこれで、隙間が0になったら嫌な気分になりませんか。 highは隙間がほしいって思ってたのに。 marginというのは、これだけの隙間を用意してねってものです。

divと他の間にこれくらい隙間があれば、コンテンツは問題なく表示されます!ってのが言いたいだけです。

もし、この

が、別のdivに変わったら?予想外の隙間が空いて困っちゃいませんか?
それだけの隙間を用意する、というのが他に依存しないで考えるためには、いい仕様だと思いました。

そう考えてcss書き始めると、わりとmarginが他に依存しないのは便利だと思うはずです!