2017/03/15

box-sizingでborderやpaddingに依存しないでページを作成

CSS3のbox-sizingが便利すぎるので紹介します。borderを使用している場合にレイアウトが崩れたりする経験はありませんか。

例えばボックスを4つ横に並べたい場合、floatで横配置にし、width:25%;やwidth:○○px;でサイズを指定します。

padding・borderなしの横並びボックス

border:1px;の横並びボックス

このようにborderの幅の分だけ要素が大きくなりレイアウトが崩れてしまします。

 

boder-boxの指定

そんなときborderを指定と同時に下のCSSも一緒に指定すると、borderや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;