とりあえず「box-sizing:border-box」

goto_jp 360views 更新:2014年9月1日

通常CSSでは、実際に表示される要素の幅は「width(height) + padding」になります。

.class1 {
  width: 50px;
  height: 30px;
  padding: 10px;
}

上記の場合、.class1 の実際に表示される横幅70px、縦幅50pxになります。
そこで下記のように「box-sizing」の記述を加えます。

.class1 {
  width: 50px;
  height: 30px;
  padding: 10px;
  box-sizing: border-box;
}

「box-sizing: border-box」を指定することで、widthとheightの値が表示される幅の絶対値に指定され、その中の範囲でpaddingが取られることになります。

幅とpaddingの計算に悩まされることがなくなります。

div, table, th, td, input, textarea, .border-box {
  box-sizing: border-box;
}

上記のように、とりあえず「box-sizing」を指定しておいて良いと思えるほど便利ですが、inputなどのフォームパーツに関してはブラウザ標準の表示を崩すことになるので、きちんとCSSを組み直す必要があります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません