Close
marginプロパティは、上下左右のマージンをまとめて指定する際に使用します。
上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。
| 値を1つ指定した場合： | 指定した値が[上下左右]のマージンになります。 |
| 値を2つ指定した場合： | 記述した順に[上下][左右]のマージンになります。 |
| 値を3つ指定した場合： | 記述した順に[上][左右][下]のマージンになります。 |
| 値を4つ指定した場合： | 記述した順に[上][右][下][左]のマージンになります。 |
マージンはパディングとセットで覚えるのが良いと思います。
マージンは領域間のスペース、パディングは領域内のスペースです。
尚、マージンには負の値を指定することもできます。
マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため、注意が必要です。
p.sample1 {background-color: #f8dce0; margin: 10px;}
p.sample2 {background-color: #f8dce0; margin: 10px; padding: 10px;}
p.sample3 {background-color: #f8dce0;
margin: 10px 20px;}
p.sample4 {background-color: #f8dce0;
margin: 10px 20px 30px;}
p.sample5 {background-color: #f8dce0; margin: 10px 20px 30px 40px;}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>マージン10px</p>
<p class=”sample2″>マージン10px、パディング10px</p>
<p class=”sample3″>上下10px、左右20px</p>
<p class=”sample4″>上10px、左右20px、下30px</p>
<p class=”sample5″>上10px、右20px、下30px、左40px</p>
</body>
</html>
マージン10px
マージン10px、パディング10px
上下10px、左右20px
上10px、左右20px、下30px
上10px、右20px、下30px、左40px
どのカジノが自分に最適か分からないですか?
