h1 や p などブロック要素の背景色は margin の部分を除いて塗られますが、境界線と文字の間に隙間がほしくなるかもしれません。この隙間をpaddingといいます。これは次のように指定します。
p {
margin: 1.5% 5% 1.5% 8%;
background-color: #fff0f0;
padding: 0.5em 1em 0.5em 1em;
}
これで上下は半文字分、左右は1文字分の隙間ができています。padding は「詰め物」という意味です。指定の方法は margin と同様で、上右下左の順に書いていきます。
もちろん、単位として%を使用してもかまいません。
背景色で塗られる部分の境界に枠線を引くことができます。これをborderといいます。border は margin と、padding で指定される部分の間にひかれます。
p {
margin: 1.5% 5% 1.5% 8%;
background-color: #fff0f0;
padding: 0.5em 1em 0.5em 1em;
border:solid;
}
これで枠線ができます。色は指定しなければ黒になります。solid は枠のデザインのひとつで,単なる塗りつぶしです。
●margin と border 、padding の関係は次のようになっています。
solid の他にもいろいろあります。
border:double は二重線です。
border:groove は「溝」の意味で周りに溝を掘ったようにみせます。
border:ridge は「尾根」または「畝」で盛り上がっているように見せます。
border:inset は囲まれた領域が引っ込んでいるように見せます。
border:outset は囲まれた領域が盛り上がっているように見せます。
border:none はなしです。
●線の色も指定することが出来ます。色の名前も、からーコードも使えます。
p {
margin: 1.5% 5% 1.5% 8%;
background-color: #fff0f0;
padding: 0.5em 1em 0.5em 1em;
border:solid blue;
}
この枠線は青です。
この枠線は #ffcccc です。
●線の太さも指定することができます。1px は1ピクセルで、一番細い線です。
p {
margin: 1.5% 5% 1.5% 8%;
background-color: #fff0f0;
padding: 0.5em 1em 0.5em 1em;
border:solid red 1px;
}
この枠線は赤で 1px です。
他に今までに出てきた、em(1文字の大きさ) の単位も使えます。
この枠線は 2em です。margin の内側に枠線を引いて、さらに padding をとってから文字を表示しているのがわかります。(border:solid red 2em;)
線の太さを場所によって変えるときには,次のように指定します。
p {
margin: 2em 5% 3em 8%;
background-color: #fff0f0;
padding: 0.5em 1em 0.5em 1em;
border:solid aqua ;
border-width:2px 0px 0px 1em;
}
border に書いた太さ指定をやめ,新たに border-width を使うと,上右下左のいつもの順で太さを別々に指定できます。
margin border padding のまとめです。
background-color:色; margin: 上 右 下 左; padding: 上 右 下 左; border:タイプ 色 太さ; border-width: 上 右 下 左;
joho.html のブロック要素に、padding、border などを加えてください。