borderやpaddingに干渉されず、決めた幅のボックスにする方法。

2016/12/2 CSS

borderなどはデフォルトでは、ボックスの「外側」に線を追加する形になるので、決めた幅と違ってしまう。

そんなときは下記CSSで解決。

box-sizing: border-box;

1	box-sizing: border-box;

これをやると、ボーダーやパディングなどに依存せず、決めたボックスサイズを守ってくれる

↓クロスブラウザ対応↓

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;