CSSでボックスの内側と外側に余白を指定するマージンとパディング

スタイルシートのを勉強中の、あきら（@akrwnet）です（＾ｖ＾）

画像を使用しないで引用表示するCSSカスタマイズをしているときに、ボックスの余白部分がいまいち気に入らなかったので、margin（マージン）と、padding（パディング）を編集してみました。

何かと使う記述なので、書き留めておこうかと思います。

マージンは、ボックス外側の余白を指定するプロパティで、パディングは、ボックス内側の余白を指定するプロパティになります。

記述の仕方はどちらも変わらないので、マージンが外側、パディングが内側と覚えておけばOK

余白を一括で指定する

余白部分は、一行の記述だけで上下左右を一括で指定することができます。

上下左右を全部統一する場合はこれだけでOK
margin: 2px;
padding: 2px;

上下と左右の幅を変えたい場合は、margin: 上下px 左右px;
margin: 2px 4px;
padding: 2px; 4px;

上と左右と下をそれぞれ変えたい場合は、margin: 上px 左右px 下px;
margin: 2px 4px 6px;
padding: 2px4px 6px;

上・右・下・左と別々に指定したい時には、margin: 上px 右px 下px 左px;
margin: 2px 4px 6px 8px;
padding: 2px 4px 6px 8px;

どこがどの部分なのか、はじめは迷うかもしれませんが、上からの時計回りで指定していると思えば良いかもしれません。

一行で指定する一括のほうが楽かもしれませんが、パッと見でわかりやすい個別指定もできます。

その場合には、　-　と　top、right、bottom、left　付け加えて記述

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

指定しない場合の値は０になります。

padding-top: 5px;
padding-bottom: 15px;

このように、right や left を指定しなかった場合には、左右の値が０ということです。

ではまた(＾‐＾)ゝ