■ 余白の比較　pt指定の場合

・・・先ずは作例をご覧下さい。

テキスト領域から余白指定の変化を把握するため、テキスト領域を青系の背景色で表示しております。

▼marginの初期値＝０　（0pt＝余白なし　>>　値不要）

▼　"margin:10pt"　（上下左右共通10pt　>>　値1）

▼　"margin:20pt"　（上下左右共通20pt　>>　値1）

▼　・・・"margin:5pt,30pt"　（上下5pt　左右30pt　>>　値2）

▼

注：以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
（2008年2月）に伴い読み飛ばして下さい。{2015.11.18加筆}

　■ネスケ対策：

直上の作例の場合、IEは上下、左右の余白指定が反映されますが、ネスケの場合は四辺の余白を指定しなければなりません。

四辺の値を全て指定することにより、IE・ネスケ共に"上下5pt　左右30pt"になります。以下、同様にネスケ対策施行

▼

▼　・・・"margin:15pt,50pt"　（上下15pt　左右50pt　>>　値2）

▼　・・・"margin:5pt,20pt,20pt"
　（上5pt　左右20pt　下20pt　>>　値3）

▼　・・・"margin:10pt,0pt,0pt,100pt"
　（上10pt　右0pt　下0pt　左100pt　>>　値4）

▼

サイトページが増えたときなど、レイアウトに関する設定（文字間隔、行間隔など）は同じ記述を繰り返すことになると思います。
反復する記述を一度スタイルシートに設定しておけば、その設定を呼び出すことで新規HTML文書の"BODY"全体に反映させることができます。

また、部分的にマージン（間隔）を変えたいときなども同様にスタイルシートに設定し、そのCLASS属性を呼び出すことで記述の手間が軽減できます。

要素名と属性の間に半角スペース必須

　|←←←←←←←←←←　要　素　→→→→→→→→→→→| 

　　　↓親要素　・・・例えばspan　　　　　↓要素内容　
　　<SPAN STYLE="margin : 属性値 ;">未知の苦HTML..</SPAN>
　　　　　|←←←←属　性→→→→→|  
　　　　　　　　|←←←←値→→→→|

▼

　■margin属性の"値"の単位

　　　>>　mm,cm,pt,px など、または％

margin属性はその名のとおりマージン（間隔）を指定する属性です。画像・テキストの開始位置、あるいはボックス要素の内と外の間隔（余白）指定などレイアウトには欠かせない属性です。

▼

IE、ネスケ　>>　インラインスタイルの記述は次のようになります。

■ソース表示・・・IEの場合

■ソース表示・・・ネスケ対策の場合