CSS box-sizing 內容盒子

box-sizing 屬性可用於任何元素，初始值為 content-box。

/* css範例 */
/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android */

.example {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

設定值

☞ 範例

/* CSS範例- 300px包含 1px */
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

/* CSS範例- 300px包含 50px+1px */
.div2 {
  width: 300px;
  height: 100px;  
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}