TOPページ >  文章を修飾する(背景色、画像、枠など...) > マージンとパディングの違い

マージンとパディングの違い

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

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

  • マージンを  上:5px、右:15px、下:5px、左:25px
  • パディングを 上:5px、右:20px、下:5px、左:10px
として表示させてみます。また、わかりやすいように、段落の背景色を黄色に、段落の枠線を太さ 10ピクセル、ライム色で表示させます。

パリ、1870年代。オペラ座では"ファントム"(オペラ座の怪人)のしわざとされる謎の事件が続いていた。
リハーサル中での事故で、プリマドンナの代役を務めることになったクリスティーヌは、その初主演のステージで喝采を浴び、観客の中にいた幼馴染のラウルと再開する。
だが、その喜びも束の間、仮面をかぶった謎の怪人、ファントムに...

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

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

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

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

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

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

mag-pad.jpg

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
フィールド指定して文章を枠で囲む
文字や文章、画像の行揃えを指定する
文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
文章や文字、画像を囲む枠の種類を指定する
文字や文章、画像を囲む枠の色を指定する
文章や文字、画像を枠で囲む
マージンとパディングの違い
余白を入れる(パディング)
余白を入れる(マージン)
改行する/改行を禁止する
文章の背景色、背景画像、配置方法をまとめて指定する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
段落文章の横幅を指定する
文章の行間隔を指定する
文章の背景画像を指定する
文章の背景色を指定する
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス