コーディングのとき、知っておくとちょっと便利なcssコード。

webを作っていると、inputなどのフォームをデフォルトから変更する機会がけっこうあります。

が、なぜかテキストボックスだけ、指定した幅、高さにならないことがあります。

原因は、テキストボックスなどはブラウザによって自動的にmarginやpaddingが入るため。

これを解消するために、cssで「box-sizing:border-box」を指定します。

これで、marginやpaddingが指定した幅や高さに含まれるので、

余分なはみ出しを解消できると。ベンダープレフィックスを含めた記載方法はこんな感じで。

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