盒子模型的组成

盒子模型的组成

1. margin（外边距）： 盒子与外界的距离。
2. border（边框）： 盒子的边框。
3. padding（内边距）： 紧贴内容的补白区域。
4. content（内容）：元素中的文本或后代元素都是它的内容。

如图所示：

盒子的大小 = content + 左右 padding + 左右 border

注意：

1. 外边距 margin 会影响盒子的位置。
2. 元素总宽度 （未设置width时）= 父的content — 自身的左右margin。
3. 内容区的宽度（未设置width时） = 父的content — 自身的左右margin — 自身的左右border — 自身的左右
   padding。