合理使用 padding 和 margin 可控制元素内外间距，实现清晰布局。padding 是内容与边框间的内边距，margin 是元素间的外边距。CSS 简写语法支持一到四个值设置四方向间距。垂直 margin 相邻时会合并，可通过只设一方 margin 或添加 border、padding 阻断。推荐设置 box-sizing: border-box，使 width 包含 padding 和 border，便于尺寸控制，避免溢出，提升布局灵活性。
调整元素的 padding 和 margin 是布局中最常见的操作。合理组合使用它们，可以控制元素内外间距，实现清晰、美观的页面结构。
理解 padding 与 margin 的区别
padding 是内容与边框之间的距离，属于元素内部空间；margin 是元素与其他元素之间的外部距离。两者都会影响布局，但作用范围不同。
例如：
这个 div 有内边距和外边距
上面这个 div 内容离边框 20px（padding），同时整体离周围元素 30px（margin）。
立即学习“前端免费学习笔记（深入）”；
使用简写属性高效设置
CSS 提供了简写语法，能快速定义四个方向的 padding 或 margin。
-
一个值：应用于四边，如
padding: 10px; -
两个值：上下、左右，如
margin: 10px 20px; -
三个值：上、左右、下，如
padding: 10px 15px 5px; -
四个值：上右下左（顺时针），如
margin: 10px 5px 8px 15px;
处理垂直外边距合并问题
当两个垂直元素的 margin 相邻时，浏览器会合并为一个更大的 margin。这可能造成间距小于预期。
解决方法包括：
- 只给其中一个元素设置 margin
- 使用 padding 或 border 阻断合并（如父元素加
padding-top: 1px） - 改变布局方式，比如用 Flexbox
结合盒模型控制整体尺寸
默认 box-sizing: content-box 下，padding 和 border 会增加元素总宽高。推荐设置：
这样设置后，width 包含 padding 和 border，更容易控制布局，避免因 padding 导致溢出。
基本上就这些。掌握 padding 和 margin 的组合使用，配合 box-sizing 和简写规则，能更灵活地构建网页结构。
