見出しのスタイルを指定する。

「見出し枠の内側の余白を指定する」

padding

見出しの背景に色をつけると、見出しを目立たせることが出来ますが。
見出しに背景を付けても、背景と文字の大きさが同じである為、
背景と文字のフチがくっついてしまっています。見出しの領域の内側に
余白を空けておくと見やすくなります。このような枠の内側の余白を指定するには、
padding プロパティを使います。

見出し枠の内側の余白を指定する。


(画面クリックでWEB上のサイズを見てください。)


上のページの見出し部分に余白を指定します。

<html>
<head>
<title>紙の豆知識</title>
<style type="text/css">
<!--
body {
margin-left:15%;
margin-right:15%;
color:#000000;
background-color:#ffffff;
}
h1 {
font-size:42px;
color:#993333;
font-family:sans-serif;
}
h2 {
font-size:20px;
color:#ffffff;
font-family:sans-serif;
background-color:#cc6666;
padding:3px;
}
p {
font-size:16px;
font-family:serif;
line-height:150%;
}
.notes {
font-size:14px;
color:#660000;
}
--></style>
</head>
<body>

<h1>紙の豆知識</h1>

<h2>A判とB判</h2>
<p>
A判というサイズはドイツで生まれた、工業規格で現在は国際規格。
B判は日本独自の規格で,江戸時代の公用紙「美濃紙」のサイズに
由来するもの。日本のお役所の書類にB判が多いのはそのせいとか。
書道で使う「半紙」は美濃紙を半分にしたものということからそう呼ばれ
るようになりました。
</p>
<h2>紙のタテ・ヨコの比率のヒミツ。</h2>
<P>A3の紙を半分に折るとA4に、A4の紙をまた半分に折るとA5に成ります.
B判でも何度折っても紙は相似形のまま半分の面積に、此れは紙の
縦と横の比率が1:√2になっているから。次々に半分に折っていっても、
縦・横の比率が変わらず、紙に無駄が出ないようになっています。</P>
<h2>中性紙は保存性が高い。</h2>
<P>紙にはインクのにじみ防止のためにサイズ剤が使われています、
その時に使われる定着剤、硫酸バンドにより紙が酸性化。
長い年月の間に繊維か劣化し紙はボロボロになってしまいます。
一方中性紙は中性サイズ剤を使用しているので、繊維が酸性化
せず良い状態で長期保存できます。</P>
<h2>紙の豆知識はこれだけ?</h2>
<P>紙に付いて知りたい人は、<u><i>donbey suroomの紙の豆知識</i></u> を
見てください。<br>
<SPAN class="notes">紙の豆知識以外に紙の規格表や面白いお話もあります。
<SPAN></SPAN></SPAN></P>
</body>
</html>


(画面クリックでWEB上のサイズを見てください。)

内側の余白を指定するプロパティ
padding-left: 左内側の余白;
padding-right: 右内側の余白;
padding-top: 上内側の余白;
padding-bottom: 下内側の余白;
padding: 四辺の内側の余白;