宽与边距

在HTML和CSS中，元素的宽度（width）、外边距（margin）、边框（border）和内边距（padding）共同决定了元素在页面上的最终尺寸和位置。理解它们之间的关系对于布局设计至关重要。

1. 宽度（`width`）

宽度是指元素内容区域的宽度。
在CSS中，width属性设置元素的宽度。
宽度只包括元素的可见内容区域，不包括边框、内边距或外边距。

2. 外边距（`margin`）

外边距是元素边框外的空白区域。
margin属性可以设置一个元素的外边距，可以有四个方向：上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）。
外边距可以为正（推离其他元素）或负值（拉向其他元素）。
外边距有“折叠”行为，即当两个元素的外边距相遇时，它们将合并为一个外边距，其大小等于两个外边距中的较大者。

3. 边框（`border`）

边框围绕元素的内容和内边距。
border属性设置元素的边框，包括边框的宽度、样式和颜色。
边框的宽度会增加元素的总宽度和高度（如果box-sizing设置为content-box，这是默认值）。

4. 内边距（`padding`）

内边距是元素内容和边框之间的空间。
padding属性设置元素的内边距，可以有四个方向：上（padding-top）、右（padding-right）、下（padding-bottom）、左（padding-left）。
内边距会影响元素的总宽度和高度，因为它增加了内容区域的大小。

盒子模型

CSS盒子模型（Box Model）是这些属性如何相互作用的表示。有两种主要的盒子模型：

内容盒子模型（Content-box）（默认）
- 总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
- 总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
边框盒子模型（Border-box）
- 总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
- 总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
- 但是，width和height包括内容、内边距和边框，不包括外边距