トップページ > スタイルシートリファレンス > margin

★スタイルシートリファレンス

margin …… マージンに関する指定をまとめて行う
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape4Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6

marginプロパティは、上下左右のマージンをまとめて指定する際に使用します。 上下左右を異なるマージン幅にしたい場合には、スペースで区切って複数の値を指定します。

値を1つ指定した場合: 指定した値が[上下左右]のマージンになります。
値を2つ指定した場合: 記述した順に[上下][左右]のマージンになります。
値を3つ指定した場合: 記述した順に[上][左右][下]のマージンになります。
値を4つ指定した場合: 記述した順に[上][右][下][左]のマージンになります。

マージンはパディングとセットで覚えるのが良いと思います。

マージン10px
パディング10px
マージン10px、パディング10px

マージンは領域間のスペース、パディングは領域内のスペースです。

尚、マージンには負の値を指定することもできます。 マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが、重なり順や重ね位置がブラウザによって異なるため、注意が必要です。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

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ソース

<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

■関連項目

margin …… マージンに関する指定をまとめて行う
margin-top …… 上マージンを指定する
margin-bottom …… 下マージンを指定する
margin-left …… 左マージンを指定する
margin-right …… 右マージンを指定する
padding …… パディングに関する指定をまとめて行う
padding-top …… 上パディングを指定する
padding-bottom …… 下パディングを指定する
padding-left …… 左パディングを指定する
padding-right …… 右パディングを指定する
▲ページ先頭へ
トップページ > スタイルシートリファレンス > margin
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ