目次
CSSを初めて最初にくる厄介な出来事はdivの中に書いたdivのmarginプロパティが思うように効かないということです。
marginプロパティとは、
外側の余白を設定するプロパティです。
しかし、
外側を設定しても上側の余白が効かないという状況に陥ってしまいます。
CSSを勉強しはじめて最初に訪れる
代表的なはまりどころ
です。
次のソースコードを見てみましょう。
HTML部
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>marginテスト</title> <link rel="stylesheet" type="text/css" href="margin.css"> </head> <body> <div id="outside"> <div id="middle"> <div id="inner"> </div> </div> </div> </body> </html>
CSS部
@charset "utf-8"; /* CSS Document */ #outside{ margin: 10px auto; width: 800px; height: 800px; background: #F00; } #middle{ margin: 10px; width: 600px; height: 600px; background: #0F0; } #inner{ margin: 20px; width: 400px; height: 400px; background: #00F; }
と書いてみると以下のような状況になってしまいます。 #middleや#innerでmarginを指定したのにも関わらず以下のように上側のmarginがあかないという状況になってしまいます。
これは IE,FireFox,GoogleChrome,Operaすべてのブラウザ でこのような表示になってしまいます。 marginの上側が効かないという状況に陥ってしまいます。
このような場合は、いくつか方法があります。
親要素、outsideとmiddleにpaddingプロパティを追加しましょう。
CSS部
@charset "utf-8"; /* CSS Document */ #outside{ margin: 10px auto; padding: 10px;/*この部分を追記*/ width: 800px; height: 800px; background: #F00; } #middle{ /* margin: 10px; この部分をoutsideのpaddingへ記述*/ padding: 20px;/*この部分を追記*/ width: 600px; height: 600px; background: #0F0; } #inner{ /* margin: 20px; この部分をmiddleのpaddingへ記述*/ width: 400px; height: 400px; background: #00F; }
すると以下のようになります。
※トータルの長さはmarginやpaddingの設定によって伸縮するので調整は各自行ってみてください。 参考記事:margin、border、paddingの違いについて
middleのmarginを有効にしたいのであれば、outside側にも記述。
両方にborderを付け加える必要があります。片一方だけではできません。
CSS部
#outside{ margin: 10px auto; width: 800px; height: 800px; background: #F99; border:solid 2px #0FF; } #middle{ margin: 10px; width: 600px; height: 600px; background: #9F9; border: solid 2px #FF0; } #inner{ margin: 20px; width: 400px; height: 400px; background: #99F; border: solid 2px #F0F; }
試しに、コメントアウト等をして、挙動を確認してみてください。
※トータルの長さはmarginやborderやpaddingの設定によって伸縮するので調整は各自行ってみてください。 参考記事:margin、border、paddingの違いについて