17、CSS 盒子模型：内边距、外边距、边框、颜色与背景的全面解析

CSS 盒子模型：内边距、外边距、边框、颜色与背景的全面解析

在网页设计中，CSS 盒子模型是一个基础且强大的概念，它涉及到元素的内边距（Padding）、外边距（Margins）、边框（Borders）以及颜色和背景等多个方面。下面我们将详细探讨这些内容。

1. 理解盒子格式化模型

CSS 为所有元素采用了盒子格式化模型，该模型将每个元素置于矩形或正方形的盒子中，这些盒子具有多个可配置的属性。实际上，盒子布局和格式化模型在传统出版行业早已广泛应用，比如在杂志或报纸中，标题、文本列、广告等都被放置在不同的盒子里。

在 CSS 盒子中，有三个重要的分层属性：
- 外边距（Margins） ：代表元素外部的空间，用于分隔不同的元素。
- 边框（Borders） ：位于元素外边距内侧，但在元素内边距外侧的可配置线条。
- 内边距（Padding） ：元素与其边框之间的空间。

这些属性可以单独配置，也可以协同工作，以独特地呈现元素。

2. 定义元素外边距

在设计文档时，外边距是需要考虑的重要因素。有些元素自带默认外边距以与相邻元素分隔，但有时我们需要调整这些标准外边距。例如，在使用图像时，可能会发现图像与周围元素的外边距过窄，就像文本中的字母“T”几乎与图像接触一样。

为了调整元素周围的空间，可以使用外边距属性。有单独调整各边外边距的属性，也有一个快捷属性可以一次性调整所有外边距。
- 单独调整各边外边距的属性有： margin-top <