ホームページ作成の基礎からご提供するホームページ作成Space

マージン、パディングそれぞれについては、各項目をご覧ください。ここでは、マージンとパディングの違いについてご説明します。

いま、グレーの部分が表示領域と考えてください。ここで、

• マージンを　　上：5px、右：15px、下：5px、左：25px
• パディングを　上：5px、右：20px、下：5px、左：10px

として表示させてみます。また、わかりやすいように、段落の背景色を黄色に、段落の枠線を太さ 10ピクセル、ライム色で表示させます。

このソースは、次のようになります。

<div style="margin:5px 15px 5px 25px;padding:5px 20px 5px 10px;background-color:yellow;border:10px lime solid;">
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... </div>

このとき、マージンとパディングは下図のようになっています。マージンは、段落などのブロックタグ要素が表示される領域（グレーの部分の端末）と、それより内側に発生するブロックタグ枠（ライム色の枠線の外側）との間の空白です。またパディングは、そのブロックタグ枠（ライム色の枠線の内側）と、さらに内側に表示されるブロックタグ文書（破線で囲まれた段落文章の端末）との間の空白です。

表示領域とマージン、パディングの間には必ず、

表示領域　= 左マージン + 左枠の太さ + 左パディング + 段落文章 +
　　　　　　右マージン + 右枠の太さ + 右パディング

の関係が成り立つようになります。