CSS 学习手册

**内边距（Padding）**：内容与边框之间的空间，增加元素内部的呼吸空间。 ```css /* 四个方向独立设置 */ padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; /* 简写：上 右 下 左 */ padding: 10px 20px 10px 20px; /* 两个值：上下 左右 */ padding: 10px 20px; /* 一个值：四个方向相同 */ padding: 15px; ``` **外边距（Margin）**：盒子与其他元素之间的空间，影响布局中的间距。 ```css margin: 10px 20px; /* 上下10px，左右20px */ /* 负边距可让元素重叠 */ margin-top: -5px; ``` **外边距合并（Margin Collapsing）**： - 相邻块级元素的上下外边距会合并为较大值 - 父子块级元素的上下外边距也会合并（除非父元素有 padding/border 阻挡） ```css /* 防止外边距合并的常用方法：父元素设置 overflow: hidden; 或 display: flex; */ .parent { overflow: hidden; } ```