CSS 盒子模型
所有 HTML 元素都可以看作是盒子。
CSS 盒子模型
在 CSS 中，當我們談論設計和佈局時，會使用“盒子模型”這個術語。
CSS 盒子模型本質上是一個包裹著每個 HTML 元素的盒子。它包含：內容、內邊距（padding）、邊框（border）和外邊距（margin）。下圖說明了盒子模型
各部分解釋
- 內容 - 盒子的內容，文字和影像顯示在此處
- 內邊距 (Padding) - 在內容周圍建立區域。內邊距是透明的
- 邊框 (Border) - 圍繞內邊距和內容的邊框
- 外邊距 (Margin) - 在邊框外部建立區域。外邊距是透明的
盒子模型允許我們為元素新增邊框，並定義元素之間的空間。
元素的寬度和高度
為了在所有瀏覽器中正確設定元素的寬度和高度，您需要了解盒子模型的工作原理。
重要提示： 當您使用 CSS 設定元素的寬度和高度屬性時，您只是設定了內容區域的寬度和高度。要計算元素的總寬度和高度，您還必須包括內邊距和邊框。
示例
這個 <div> 元素將具有 350px 的總寬度和 80px 的總高度：
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
自己動手試一試 »
計算如下
元素的總寬度應如下計算
元素總寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框
元素的總高度應如下計算
元素總高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框
注意： 外邊距屬性也影響盒子在頁面上佔用的總空間，但外邊距不包含在盒子的實際尺寸中。盒子的總寬度和高度在邊框處停止。
