余白(マージン)/詰め(パディング)

余白(マージン)/詰め(パディング)

「margin(マージン)」は、コンテンツエリアの外側の枠線のさらに外側の余白を指定します。 「padding(パディング)」では、コンテンツエリアと枠線の間の詰めを指定します。

margin

余白(マージン)の幅を指定します。「値」は、上、右、下、左の順に記述します。 「値」が1つの場合は「上下左右」が同値、2つの場合は「上下」「左右」が同値と認識します。

CSSソース
p{
   margin: 10px 10px 10px 10px;
   font-size: 12px;
   color: #666666;
   border-style: solid;
   border-width: 1px 1px 1px 1px;
   border-color:#666666;
}
値/意味/説明
意味説明
%パーセント
pxピクセルディスプレイの画素数
em要素のフォントサイズに対する相対値
ex要素の小文字の「x」に対する相対値
inインチ1in=2.54cm
cmセンチメートル
mmミリメートル
ptポイント1pt=1/72in
pcパイカ1pc=12pt

padding

詰め(パディング)の幅を指定します。「値」は、上、右、下、左の順に記述します。 「値」が1つの場合は「上下左右」が同値、2つの場合は「上下」「左右」が同値と認識します。

CSSソース
p{
   padding: 10px 10px 10px 10px;
   font-size: 12px;
   color: #666666;
   border-style: solid;
   border-width: 1px 1px 1px 1px;
   border-color:#666666;
}
値/意味/説明
意味説明
%パーセント
pxピクセルディスプレイの画素数
em要素のフォントサイズに対する相対値
ex要素の小文字の「x」に対する相対値
inインチ1in=2.54cm
cmセンチメートル
mmミリメートル
ptポイント1pt=1/72in
pcパイカ1pc=12pt
CSSソース
p{
   margin: 10px 10px 10px 10px;
   padding: 10px 10px 10px 10px;
   font-size: 12px;
   color: #666666;
   border-style: solid;
   border-width: 1px 1px 1px 1px;
   border-color:#666666;
}