盒子模型简介

在CSS中，盒子模型描述了一个元素所占用的空间，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）几个部分。内边距（padding）和外边距（margin）都是盒子模型的一部分，但它们的作用和表现有所不同。
内边距（Padding）
内边距是指内容（如文本、图片等）与边框之间的空间。它位于元素的边框内部，不会影响元素周围元素的位置。设置内边距可以增加内容与边框之间的距离，使内容不会紧贴边框，从而提高内容的可读性和美观性。
作用：
增加元素内部空间，使内容不会紧贴边框。
可以用来在元素内部创建视觉间隔。
可以用来调整布局中的空间分布。
示例：.box01{ padding: 50px; } 表示 .box01 类的元素在内容和边框之间有50像素的空间。
外边距（Margin）
外边距是指元素边框外侧的空间，它是元素边框与相邻元素之间的距离。设置外边距可以控制元素之间的间距，影响元素的布局和位置。
作用：
控制元素之间的间距。
用于布局，使元素水平或垂直移动。
防止元素重叠。
示例：.box01{ margin: 20px; } 表示 .box01 类的元素与周围元素之间有20像素的空间。
Padding 与 Margin 的对比
定位：Padding 是元素内部的空间，而 Margin 是元素外部的空间。
作用对象：Padding 影响元素的内容和边框之间的空间，Margin 影响元素与其他元素之间的空间。
布局影响：Padding 增加元素的总尺寸，而 Margin 不影响元素的总尺寸，但会影响元素在页面上的位置。
合并现象：相邻的垂直 Margin（外边距）可能会发生“外边距合并”现象，即两个相邻的外边距会合并为一个较大的外边距，但 Padding 不会合并。
了解这些差异有助于更好地控制页面布局和元素间距。在实际的网页设计中，Padding 和 Margin 常常需要配合使用，以达到理想的布局效果。