ブロックのpaddingとborder

padding

h1 や p などブロック要素の背景色は margin の部分を除いて塗られますが、境界線と文字の間に隙間がほしくなるかもしれません。この隙間をpaddingといいます。これは次のように指定します。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  background-image: url(images/redsq.png);
  padding: 0.5em 1em 0.5em 1em;
}

これで上下は半文字分、左右は1文字分の隙間ができています。padding は「詰め物」という意味です。指定の方法は margin と同様で、上右下左の順に書いていきます。

もちろん、単位として%を使用してもかまいません。

paddingの範囲

border

背景色で塗られる部分の境界に枠線を引くことができます。これをborderといいます。border は margin と、padding で指定される部分の間にひかれます。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  background-image: url(images/redsq.png);
  padding: 0.5em 1em 0.5em 1em;
  border:solid;
}

これで枠線ができます。色は指定しなければ黒になります。solid は枠のデザインのひとつで,単なる塗りつぶしです。

margin と border 、padding の関係は次のようになっています。

paddingの範囲

borderの種類

solid の他にもいろいろあります。

border:double は二重線です。

border:groove は「溝」の意味で周りに溝を掘ったようにみせます。

border:ridge は「尾根」または「畝」で盛り上がっているように見せます。

border:inset は囲まれた領域が引っ込んでいるように見せます。

border:outset は囲まれた領域が盛り上がっているように見せます。

border:none はなしです。

borderの色

線の色も指定することが出来ます。色の名前も、からーコードも使えます。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  background-image: url(images/redsq.png);
  padding: 0.5em 1em 0.5em 1em;
  border:solid blue;
}

この枠線は青です。

この枠線は #ffcccc です。

borderの太さ

線の太さも指定することができます。1px は1ピクセルで、一番細い線です。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  background-image: url(images/redsq.png);
  padding: 0.5em 1em 0.5em 1em;
  border:solid red 1px;
}

この枠線は赤で 1px です。

他に今までに出てきた、em(1文字の大きさ) の単位も使えます。

この枠線は 2em です。margin の内側に枠線を引いて、さらに padding をとってから文字を表示しているのがわかります。(border:solid red 2em;)

borderの太さを場所によって変える

線の太さを場所によって変えるときには,次のように指定します。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  background-image: url(images/redsq.png);
  padding: 0.5em 1em 0.5em 1em;
  border:solid aqua ;
  border-width:2px 0px 0px 1em;
}

border に書いた太さ指定をやめ,新たに border-width を使うと,上右下左のいつもの順で太さを別々に指定できます。

margin border padding

margin border padding のまとめです。

  background-color:色;
  margin: 上 右 下 左;
  padding: 上 右 下 左;
  border:タイプ 色 太さ;
  border-width: 上 右 下 左;

課題

joho.html のブロック要素に、padding、border などを加えてください。


聖愛中学高等学校
http://www.seiai.ed.jp/
Last Modified