「あれ?指定した数値でmarginが表示されないよ!なんで、効かないの?」という遭遇になったことはありませんか?
理由をわかっていなかった私は回避策としてpaddingに書き直していました。
(paddingとmarginの違いを理解していなかったようです。)
allWebクリエイター塾で受講したHTML5+CSS入門基礎講座で解決したので共有させていただきます!
理由をわかっていなかった私は回避策としてpaddingに書き直していました。
(paddingとmarginの違いを理解していなかったようです。)
allWebクリエイター塾で受講したHTML5+CSS入門基礎講座で解決したので共有させていただきます!
こうやってマージンは消える!
どうして、マージンが消えてしまうのでしょうか?
サンプルで確認してみます。
HTMLソース
<div id="olive"></div> <div id="orange"></div>
CSSソース
#olive { background: olive; width: 510px; height: 100px; margin-bottom: 70px; } #orange { background: orange; width: 510px; height: 100px; margin-top: 50px; }
#oliveの下に70pxと#orangeの上に50pxのmarginを入れています。
一見、70px+50pxなので合計120pxのmarginができるかと思いますが、
実際には70pxしかありません。。どうしてでしょうか?
対処方法をマスターする!
シンプルな考え方として、marginは一定の方向につけるルールを設けます。たとえば、水平方向は下につけて、上にはつけない。
垂直方向は左につけて、右にはつけない。などのルールです。
HTMLソース
<div id="olive"></div> <div id="orange"></div>
CSSソース
#olive { background: olive; width: 510px; height: 100px; margin-bottom: 50px; } #orange { background: orange; width: 510px; height: 100px; margin-bottom: 50px; }
一定方向にmarginをつけることで、相殺されることはありませんね!
まとめ
- marginは、重なると消えてしまう
- marginが重なりそうなところは、一定方向にルール化して指定する
たったこれだけのことですが、私は知らなかった時、marginを下に付けたり上に付けたりしていました。
結果、div、p、h1などにどれほど余白がつくのかがわからず、
余計なidやclassを付けて!impotantまで使ってしまいました。(最低すぎる。。)
サイトの読み込み速度も悪くなりますが、このように無駄な指定を行う手間を考えると恐ろしいです。
今回のことで、よりシンプルなソースを目指すことの重要性を再度認識することができました。
0 件のコメント :
コメントを投稿