CSSでmarginプロパティが効かない時の対策 - nicepaper @ ウィキ

marginプロパティではまってしまう
対策
- 対策1　paddingを設定する。
- 対策2　borderを設定する。

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;	 
}

試しに、コメントアウト等をして、挙動を確認してみてください。