CSSで要素の幅や高さを指定するときに注意した方がいいこと・・・

それは幅や高さにはボーダー（枠）やパディング・マージンは含まれないということです。

このことについて自分の記憶の整理も兼ねて少しまとめてみたいと思います。

widthとheightプロパティは要素の純粋なサイズ

普通要素に幅や高さを指定するときはwidthプロパティまたはheightプロパティを使うと思います。

例えば次のような感じで

幅や高さにはpxだけなく、パーセント(%)単位やem単位なんかも使用可能です。

それでこの width  とか height  は要素の純粋なサイズを指定するためのものなので

ボーダーやパディング・マージンなどの余白の大きさを一切含まない

という点が意外と見落としがちなポイントになります。

例えば次のようにある要素に上下左右10pxのボーダーを付けたとしましょう。

このとき要素自体の大きさは 300 x 250 にはなりません。

ボーダーは別で計算されるので実際のボーダー込みの大きさは

となるので 320 x 270 となってしまうのです。

またこれはパディングとマージンでも同じことが言えます。

例えば次のように要素のパディングとマージンを5pxずつ指定したとしましょう。

パディングやマージンというのは要素の外につくものです。

なので当然 width  や height  には含まれないので実際に要素が占めるサイズは

となるので 320 x 270 です。

こういう風に要素のwitdhとheightプロパティというのは

ボーダーや余白を含まない純粋な要素のサイズを指定するもの

なことに注意が必要です。

このことを知らないと要素がはみ出るなどの不都合が出てしまいます。

要素への正しいサイズの指定方法

じゃあ要素を本当に思った通りのサイズにするにはどうすればいいのか・・・

ということですが、単純に要素からボーダーや余白の大きさを引けばいいだけです。

例えば先ほどの例で10pxのボーダーを 300 x 250 の要素につけるとボーダー分だけ大きくなります。

これをボーダー込みで 300 x 250 にしたいなら次のように書けばOK

calc  というのはCSS内で計算をするために使える関数

この中に 300px - 20px  とかの式を書けばその答えをプロパティに適用してくれます。

別に width: 280px; height: 230px;  と書いてもいいですが、ボーダーを引いていることを明確化するにはこちらの書き方が後で分かりやすくなるはずです。

そしてパディング・マージンも要素のサイズ指定時には引いた方が良いでしょう。

例えばパディング・マージンを5pxずつ付ける場合は次のように指定すればOK

上下左右のパディングとマージンを引いていることが分かりやすいように

widthプロパティには width: calc(300px - 10px - 10px);
heightプロパティには height: calc(250px - 10px - 10px);

と指定しています。

まあ別にcalcは使う必要ないかもしれませんが、あとで「なんでこの幅や高さにしたんだろう？」と理解しやすくするためにも指定しておいて損はないでしょう。

とりあえず width  と height  はボーダーとかパディングとかマージンを一切含まない純粋な要素のサイズ、ということだけは知っておいた方がいいです。

ここまでのまとめ

ということで簡単にまとめ

• widthとheightで指定できるのは純粋な要素サイズ
  ボーダー(border)やパディング(padding)、マージン(margin)などは一切含まない
• 要素サイズ指定時はボーダーや余白を引くのがベスト
  思い通りの幅や高さにするならあらかじめ width  と height  を指定したときに余計なものを引いておく

要素の幅や高さがおかしいと感じたらボーダーや余白に原因があるかもしれないので要チェックです。