margin
解説
上下左右のマージン(要素に対する余白)をまとめて指定します。マージンは常に透明です。上下左右を異なるマージン幅にしたい場合は、スペース区切りにて複数の値を指定します。値を1つ指定した場合は指定した値が上下左右のマージンとなります。値を2つ指定した場合は記述した順に[上下][左右]のマージンとなります。値を3つ指定した場合は記述した順に[上][左右][下]のマージンとなります。値を4つ指定した場合は記述した順に[上][右][下][左]のマージンとなります。マージンには負の値を指定することもできますが、環境によっては思惑通りに描画されないかもしれません。
パーセント値での指定も可能ですが、包含ブロックの横幅に対する割合となるので注意が必要です。margin-top
やmargin-bottom
の場合も、高さではなく横幅を参照します。
auto
という値を取ることも可能で、要素のwidth
やheight
からマージンを算出しなさいという指定となっています。
また、縦方向のmargin
は重なり合い、指定の大きい方が生かされますので注意が必要です。ただし、どちらかのマージンが負の値ならば合計され、浮動体や絶対配置のボックスでは重なりません。水平方向のマージンも重なりません。
プロパティ情報
値: | 長さ、パーセンテージ、auto のいずれかを1つ以上4つ以下。 |
---|---|
初期値: | 定義無し |
適用対象: | 全ての要素 |
継承: | しない |
パーセンテージ: | 包含ブロックの横幅に対する割合 |
適用メディア: | 視覚 |
レベル: | 1〜2 |
参照
margin margin-top margin-bottom margin-left margin-right padding padding-top padding-bottom padding-left padding-right
使用例
ソース
CSSの記述方法はスタイルシートってなに?も参照下さい。 div.pare {border:1px solid #0000ff;margin: 3px;} p.sample1 {border:1px solid #ff0000;margin: 10px;} p.sample2 {border:1px solid #ff0000;margin: 10px 20px;} p.sample3 {border:1px solid #ff0000;margin: 10px 20px 30px;} p.sample4 {border:1px solid #ff0000;margin: 10px 20px 30px 40px;}
HTMLの記述方法 <p class="pare"><p class="sample1">サンプル</p></p> <p class="pare"><p class="sample2">サンプル</p></p> <p class="pare"><p class="sample3">サンプル</p></p> <p class="pare"><p class="sample4">サンプル</p></p>
表示結果
サンプル
サンプル
サンプル
サンプル
視覚的に分かり易いよう、包含ブロックを青線で表示しています。