※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

目次

marginプロパティではまってしまう

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の上側が効かないという状況に陥ってしまいます。

対策

このような場合は、いくつか方法があります。

対策1 paddingを設定する。

親要素、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の違いについて

対策2 borderを設定する。

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の違いについて