ブロックのpaddingとborder

padding

h1 や p などを表示するブロックの背景色は margin の内側が塗られますが、塗りの境界と文字の間に隙間がほしくなるかもしれません。

これは文字の周りに隙間がない例です。

これは上下は半文字分、左右は1文字分の隙間を指定したものです。

この隙間をpaddingといいます。これは次のように指定します。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  padding: 0.5em 1em 0.5em 1em;
}

padding は「詰め物」という意味です。指定の方法は margin と同様で、上右下左の順に書いていきます。

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

パディングはマージンと文字列などの内容の間です

border

背景色で塗られる部分の境界に枠線を引くことができます。これをborderといいます。

これはボーダーの例です。

背景色はなくすことも出来ます。

次のように指定します。solid 2px #336633 は、それぞれ 線の種類 色 太さ を表します。半角スペースで区切ります。指定の順番は問いません。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  padding: 0.5em 1em 0.5em 1em; 
  border:solid 2px #663399;
}

border は margin と、padding で指定される部分の間にひかれます。

ボーダーはパディングとマージンの間です

borderの線の種類

普通の線は solid と指定します。

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  padding: 0.5em 1em 0.5em 1em;
  border:solid;
}

これで実線ができます。

色は指定しなければその要素の文字の色と同じ、太さは指定しなければ中くらいの太さ(約3px)になります。普通は省略しないで指定します。

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

border:double は二重線です。

border:dotted は点線です。

border:dashed は破線です。

ここから下は違いがわかりやすいように太さも変えています

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

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

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

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

border:none はなしです。

borderの色

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

p {
  margin: 1.5% 5% 1.5% 8%;
  background-color: #fff0f0;
  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;
  padding: 0.5em 1em 0.5em 1em;
  border:solid red 1px;
}

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

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

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

太さは、px,emなどの値の他、thin medium thick の3つも使えます。thin(細い) medium(中くらい) thick(太い) です。widthの値を省略すると、mediumになります。

margin border padding

margin border padding のまとめです。

テキスト領域をpaddingが囲み、その周りをborderが囲み、その外側がmarginです。

いままでに出てきたcssの属性一覧

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

課題

joho.html のh1,h2,p要素に、padding、border などを加えてください。