CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在の CSS3 の草案 にも 一応残ってるので, がっつり使わせて頂いてる次第です. Table of contents box-sizing プロパティとは box-sizing プロパティとはボックスサイズ(width, height ) の算出方法を 指定する際に使用するプロパティです. 指定可能な値はこちら っといってもいまいちわかりませんよね. 実際に使用しているサンプルを作ってみました. box-sizing プロパティに指定している値が違うだけで表示サイズが異なるのが分かるかと思います.

http://bit.ly/ORn3ur