マージンとパディングの違い
マージン、パディングそれぞれについては、各項目をご覧ください。ここでは、マージンとパディングの違いについてご説明します。
いま、グレーの部分が表示領域と考えてください。ここで、
- マージンを 上：5px、右：15px、下：5px、左：25px
- パディングを 上：5px、右：20px、下：5px、左：10px
|
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。 だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... |
このソースは、次のようになります。
<div style="margin:5px 15px 5px 25px;padding:5px 20px 5px 10px;background-color:yellow;border:10px lime solid;">
パリ、1870年代。オペラ座では"ファントム"（オペラ座の怪人）のしわざとされる謎の事件が続いていた。<br>リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。<br>だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに... </div>
このとき、マージンとパディングは下図のようになっています。マージンは、段落などのブロックタグ要素が表示される領域（グレーの部分の端末）と、それより内側に発生するブロックタグ枠（ライム色の枠線の外側）との間の空白です。またパディングは、そのブロックタグ枠（ライム色の枠線の内側）と、さらに内側に表示されるブロックタグ文書（破線で囲まれた段落文章の端末）との間の空白です。
表示領域とマージン、パディングの間には必ず、
表示領域 = 左マージン + 左枠の太さ + 左パディング + 段落文章 +
右マージン + 右枠の太さ + 右パディング
の関係が成り立つようになります。
ランキングに参加中です! お役に立てたらクリックをお願いします→
同一カテゴリ内一覧
コンピュータとインターネット > データ形式 > HTML > リファレンス