関連プロパティ

マージンに関わるプロパティは、以下の各プロパティです。

  • 1.margin : 一括指定プロパティ
    • margin-top : 個別指定プロパティ
    • margin-right : 個別指定プロパティ
    • margin-bottom : 個別指定プロパティ
    • margin-left : 個別指定プロパティ

    • (個別指定プロパティは、当該指定箇所が違うだけなので、一括指定プロパティのページで説明を記述しています。)

マージンとは

マージンは、
ボックスの境界エッジを囲み、
ボックス間の間隔を提供します。

マージン
ボーダー
パディング
コンテンツ領域

マージンは、ボックスの境界線の縁を囲み、ボックス間の間隔を提供します。

ここでいう間隔とは、自身を包括するボックス(親要素)の内容(コンテンツ)領域の縁との間隔と、隣接するボックス(兄弟要素)の境界線の縁との間隔を言います。

  1. テキスト
  3. テキスト　　テキスト

テキストファイルでイメージすると、空白行を開けたり, 空白を途中に設けたりした感じかと思います。
(HTML内でのテキストの提示として、pre要素を用いて例示しています。)

テキスト

テキスト　　テキスト
  1. <div>ＨＴＭＬ</div>
  2. <br>
  3. <span>ＨＴＭＬ</span>　　<span>ＨＴＭＬ</span>

HTMLだけで再現すると、改行要素を用いたり, 空白を途中に設けたりした感じかと思います。ここでは全角スペースを用いています。

ＨＴＭＬ

ＨＴＭＬ　　ＨＴＭＬ
  1. div { margin: 0 0 1.0em 0; }
  2. span:last-child { margin-left: 2.0em; }
  1. <div>スタイル</div>
  2. <span>スタイル</span><span>スタイル</span>

CSSを用いると、間隔に対してマージンのプロパティを用いて実現できます。

スタイル
スタイルスタイル

マージンの相殺

マージン領域の上と下は相殺される事があります。その相殺について提示する事を目的としたページがこちら「マージンの相殺」です。

インライン要素の マージン

top および bottom のマージンは、 <span> または <code> などの置換要素ではないインライン要素には効果がありません。

  1. <style>
  2. .cdvSample040{ border:1px solid; width:10em; }
  3. .cdvSample040 > div{ outline:1px dashed; margin:1em auto 0 1em; width:6em; height:2em; }
  4. .cdvSample040 > span{ outline:1px solid; }
  5. </style>
  6. <div class="cdvSample040">
  7. <div>隣接ブロック要素</div>
  8. <span style="margin:1em;">マージン</span
  9. ><span style="margin:1em;">マージン</span
  10. ><span style="margin:1em;">マージン</span>
  11. <div>隣接ブロック要素</div>
  12. </div>
隣接ブロック要素
マージンマージンマージン
隣接ブロック要素

インライン要素の閉じタグを複数行に渡らせることで、タグ内に改行コードを押し込む対応をしています。
テキスト，インライン要素後の改行コードは１つのスペース相当と扱われてしまう為です。

style属性で指定している部分が例示の要点で、style要素で別書きしている部分は例示の為の環境作成です。

floatとマージン

floatで値がnone以外を浮動要素と呼ぶのですが、この浮動要素自体の margin は別に普通ですがその後に続く要素の margin は先の浮動要素を見ていない訳で、clear:both; の指定の意味も浮動要素が浮動でなくなる訳ではないので描画のイメージで後続の上マージンで調整と意識していると面倒です。

float:left;
margin:1em;
margin:2em;

frexマージン

後日に記述の予定です。概要としては、frexの機能自体に空き領域とかの配分があるのでそちらが優先される場合があるという事です。