3.8 排版 - 區塊模型(Box Model)

認識 Box Model

margin：border 往外的距離。

padding：內容與 border 的距離。

border：該元素的邊框。

例：

margin 和 padding 縮寫

分別都有:

• margin-top、margin-right、margin-bottom、margin-left

• padding-top、padding-right、padding-bottom、padding-left

margin: 10px;                /* 上、右、下、左，皆 10px */
margin: 10px 20px;           /* 上、下皆 10px；左右皆 20px */
margin: 10px 20px 30px;      /* 上 10px；左右皆 20px；下 30px */
margin: 10px 20px 30px 40px; /* 按照上、右、下、左的順序，依序為 10px、20px、30px、40px */

padding 縮寫形式相同。

區塊大小(box-sizing)

常用的有兩個值：content-box 和 border-box：定義的是寬高從何處算起。

• content-box：(預設值)，設定 width 或 height 時，寬度、高度指的是內容寬。

• border-box：設定 width 或 height 時，寬度、高度指的是從邊框也算進去，包含 padding。

例：