なんではみでるの？width指定の要素がはみでる原因とその対処法

ひさびさの更新になってしまいましたが、CSSでwidthを指定しているのにもかかわらず要素がはみでる原因とその対処法について書きます。

原因

CSSのボックスの考え方は、Content + Padding + Border　で構成され、さらにその周りにmarginがあるのですが、width:300px;とか書いた際にこのwidthがどこを表しているかというとContentの部分のみなんですね。

ですので、

.cssbox{
	width:300px;
	padding:10px;
	border:3px solid #000;
}

上記のコードの場合ですとwidth:300px+padding:10×2px+border:3×2px=326pxが実際表示される幅になります。これが原因でwidth指定の要素が指定した値よりも大きくなってしまいはみでてしまうのです。

対処法

box-sizingというCSSのプロパティでborder-boxを指定することで上記の問題が解決されます。

box-sizingとは、widthやheightの算出方法を指定できるプロパティです。

指定可能な値

・content-box(デフォルト)
paddingとborderの幅を要素の幅と高さに含めずに算出
※先ほどのはみでる原因になっていたのがこちらの値です。

・border-box
paddingとborderを要素の幅と高さに含めて算出

border-boxを指定してあげることでwidth:300px;をした場合、Content + Padding + Border = 300pxになるようになりますので要素が300pxより大きくなることはありません。

width指定したのにはみでて困っている方は一度box-sizingをborder-boxに指定してみてください。以前よりもレイアウトするのが楽になると思います。

いちいちプロパティを指定するのが面倒くさいという方は、

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

上記のコードで、すべてのbox-sizingをborder-boxにリセットしてしまいましょう。
では。