余白のプロパティ③

余白のプロパティのCSS

内側の余白のCSS

CSS で、h1 タグの内側の余白を 1 文字分に設定する。
p タグの内側の余白は、上下を 1 文字分、左右を 2 文字分に設定している。
また、h1 タグと p タグとでフォントサイズを変えているので、同じ 1 文字分であっても実際の大きさは異なることに注意する。
ファイル名は、005.cssとした。

h1 {
padding: 1em;
background-color: pink;
font-size: 18pt;
}

p {
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2em;
padding-right: 2em;
background-color: lightblue;
font-size: 9pt;
}

内側の余白のHTML

<link href="005.css" rel="stylesheet" type="text/css">
<h1>内側の見出しを1文字分に設定した見出し</h1>
<p>ここは、内側の余白を左右2文字分、上下1文字分に設定した文章です。</p>

外側の余白のCSS

外側の余白 を確認してみる。
先程の記述で、内側の余白であるpadding は確認出来たが、外側の余白であるmargin は視覚化が難しいため、少し工夫が必要になる。
(1)、(2)、 (3)の順に margin の値を変化させて動きを見てみる。
まず(1)だが、これは先程記述した状態である。
(2)では、h1 タグと p タグの margin を 0 に設定した。
更に、(3)で、body タグの marginも 0 に設定してみる。
body タグも他のタグと同じようにプロパティを持っているので、このように CSS でスタイルを変更出来る。
これで、marginの存在を確認することが出来る。

(1)margin無設定

h1 { }
p { }

(2)タグのmarginを0に設定

h1 { margin: 0; }
p { margin: 0; }

(3)bodyのmarginを0に設定

h1 { margin: 0; }
p { margin: 0; }
body { margin: 0; }

※background-colorと組み合わせることで、marginの存在を確認することが可能。