「CSSでmarginプロパティが効かない時の対策」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
目次
#contents
*marginプロパティではまってしまう
CSSを初めて最初にくる厄介な出来事はdivの中に書いたdivのmarginプロパティが思うように効かないということです。~
marginプロパティとは、&color(red){外側の余白を設定するプロパティです。}
しかし、&color(red){外側を設定しても上側の余白が効かないという状況に陥ってしまいます。}
CSSを勉強しはじめて最初に訪れる&color(red){代表的なはまりどころ}です。~
次のソースコードを見てみましょう。~
&u(){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>
&u(){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;
}
と書いてみると以下のような状況になってしまいます。
#image(width=500,margin_default.png)
これは&color(red){IE,FireFox,GoogleChrome,Operaすべてのブラウザ}でこのような表示になってしまいます。&color(red){marginの上側が効かないという状況に陥ってしまいます。}
*対策
このような場合は、いくつか方法があります。~
~
**対策1 paddingを設定する。
親要素、outsideとmiddleにpaddingプロパティを追加しましょう。~
&u(){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;
}
すると以下のようになります。
#image(width=500,padding.png)
&color(red){※トータルの長さはmarginやpaddingの設定によって伸縮するので調整は各自行ってみてください。}
参考記事：[[margin、border、paddingの違いについて]]
**対策2 borderを設定する。
middleのmarginを有効にしたいのであれば、outside側にも記述。~
&color(red){両方にborderを付け加える必要があります。片一方だけではできません。}~
&u(){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;
}
試しに、コメントアウト等をして、挙動を確認してみてください。
#image(width=500,border.png)
&color(red){※トータルの長さはmarginやborderやpaddingの設定によって伸縮するので調整は各自行ってみてください。}
参考記事：[[margin、border、paddingの違いについて]]
目次
#contents
*marginプロパティではまってしまう
CSSを初めて最初にくる厄介な出来事はdivの中に書いたdivのmarginプロパティが思うように効かないということです。~
marginプロパティとは、&color(red){外側の余白を設定するプロパティです。}
しかし、&color(red){外側を設定しても上側の余白が効かないという状況に陥ってしまいます。}
CSSを勉強しはじめて最初に訪れる&color(red){代表的なはまりどころ}です。~
次のソースコードを見てみましょう。~
&u(){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>
&u(){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;
}
と書いてみると以下のような状況になってしまいます。&color(red){#middleや#innerでmarginを指定したのにも関わらず以下のように上側のmarginがあかないという状況になってしまいます。}
#image(width=500,margin_default.png)
これは&color(red){IE,FireFox,GoogleChrome,Operaすべてのブラウザ}でこのような表示になってしまいます。&color(red){marginの上側が効かないという状況に陥ってしまいます。}
*対策
このような場合は、いくつか方法があります。~
~
**対策1 paddingを設定する。
親要素、outsideとmiddleにpaddingプロパティを追加しましょう。~
&u(){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;
}
すると以下のようになります。
#image(width=500,padding.png)
&color(red){※トータルの長さはmarginやpaddingの設定によって伸縮するので調整は各自行ってみてください。}
参考記事：[[margin、border、paddingの違いについて]]
**対策2 borderを設定する。
middleのmarginを有効にしたいのであれば、outside側にも記述。~
&color(red){両方にborderを付け加える必要があります。片一方だけではできません。}~
&u(){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;
}
試しに、コメントアウト等をして、挙動を確認してみてください。
#image(width=500,border.png)
&color(red){※トータルの長さはmarginやborderやpaddingの設定によって伸縮するので調整は各自行ってみてください。}
参考記事：[[margin、border、paddingの違いについて]]
