CSS - box-sizing

概要

属性名	box-sizing
値	border-box \| padding-box \| content-box
初期値	content-box
適用可能要素	width か height を持つすべての要素
継承	継承しない
メディア	visual
アニメーション	不可

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	8	1(-moz) 29	1(-webkit) 10	10.1	3.1(-webkit) 5.1

説明

height や width が対象とする領域を指定します。box-sizing: border-box を指定することで、ボーダーによってコンテンツが想定した幅を超えてしまうことを防ぐことができます。

値	説明
border-box	ボーダーの外側までを高さ・横幅とします。
padding-box	パディングの外側(ボーダーの内側)までを高さ・横幅とします。CSS3 の草案で定義されていましたが、最終案には採用されていないようです。Firefox が -moz 付きでサポートしています。
content-box	コンテンツの外側(パディングの内側)までを高さ・横幅とします。

width:150px	width:150px	width:150px
border-box	padding-box	content-box

使用例

CSS

.sample-border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffcccc;
  border: 10px solid #993333;
  padding: 10px;
  width: 80px;
  height: 80px;
}
.sample-content-box {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background: #ffcccc;
  border: 10px solid #993333;
  padding: 10px;
  width: 80px;
  height: 80px;
}

HTML

<h5>border-box</h5>
<div class="sample-border-box">こんにちわ</div>
<h5>content-box</h5>
<div class="sample-content-box">こんにちわ</div>

表示

border-box

こんにちわ

content-box

こんにちわ

リンク

初版：1997年7月27日、最終更新：2016年5月8日

https://www.tohoho-web.com/css/prop/box-sizing.htm

CSS - box-sizing

概要

サポート (説明)

説明

使用例

border-box

content-box

関連項目

リンク