スタイルシートでサイズを設定したはずなのに、
borderやpaddingを調整しているうちに最初に決めていた
サイズじゃなくなってしまったという経験はありませんか?
適当にコーディングするときは、まあ良いのですが、
ピッタリと要素に並べないといけないときなんかは計算が面倒ですよね。
今日は、そんな面倒なサイズの設定が
簡単にできるようになるプロパティをご紹介します。
まず、具体例を見てみましょう。
今、ここに200pxで設定したいボックスがあったとします。
See the Pen no_box-sizing01 by ken (@ken81) on CodePen.
そこにいろいろな事情があり、border(10px)とpadding(20px)を
設定することになりました。
See the Pen no_box-sizing02 by ken (@ken81) on CodePen.
はい、どうなりましたか?
最初の水色のボックスは200pxのままかもしれませんが、
borderとpaddingの分だけボックスが外側に太ってしまいました。
これだと、ボックス全体の幅が200pxではなく260pxになってしまいます。
これは指定したサイズが「コンテンツ」の部分、
つまり、水色のボックスを基準に設定されているためです。
実はこれにはちゃんとしたプロパティがあります。
「box-sizing」という名前のプロパティで、
初期値は「content-box」という値になっています。
この「content-box」を「border-box」に変えることで、
指定したサイズ内にborderとpaddingも収まってくれるようになります。
具体的には、こういう形で記入します。
box-sizing:border-box;
この1行を該当するセレクタ内に追加するだけです、簡単ですね。
実際にやってみましょう。
See the Pen box-sizing by ken (@ken81) on CodePen.
はい、これでイメージ通り、200pxの中にボックスが収まってくれました。
最後に、この「box-sizing」の使い方をまとめておきますので参考にしてください。
box-sizingプロパティ
content-box | paddingとborderをサイズに含めない(初期値) |
---|---|
border-box | paddingとborderをサイズに含める |