余白(マージン)/詰め(パディング)
余白(マージン)/詰め(パディング)
「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;
}
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;
}
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;
}
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;
}