padding是内边距，影响元素内部空间，margin是外边距，控制元素间距离；两者均支持四方向设置，合理使用可优化布局，配合box-sizing:border-box和margin合并特性，提升页面美观与结构清晰度。
在网页布局中，padding 和 margin 是控制元素间距的核心属性。它们虽然看起来相似，但作用不同：padding 是元素内容与边框之间的距离（内边距），margin 是元素边框外与其他元素的距离（外边距）。正确使用这两个属性能让页面结构更清晰、美观。
理解 padding（内边距）
padding 影响元素内部的空间，增加 padding 会让内容离边框更远，同时可能影响元素的整体尺寸（尤其是在 box-sizing: content-box 模式下）。
- 统一设置： 使用一个值设置四边相同 padding。
padding: 10px; - 上下、左右： 第一个值为上下，第二个为左右。
padding: 10px 20px; - 上、左右、下： 三个值时，第一个是上，第二个是左右，第三个是下。
padding: 10px 20px 15px; - 上、右、下、左（顺时针）：
padding: 10px 20px 15px 25px;
理解 margin（外边距）
margin 控制元素与其他元素之间的空白区域，常用于布局排版。它不会影响元素自身大小，但会影响整体页面流。
- 四边相同：
margin: 20px; - 上下和左右：
margin: 10px 30px; - 上、左右、下：
margin: 10px 20px 15px; - 上、右、下、左：
margin: 10px 20px 15px 25px;
实用技巧与注意事项
实际开发中，合理使用 padding 和 margin 能提升可读性和用户体验。
立即学习“前端免费学习笔记（深入）”；
- 避免过度使用大 margin 或 padding，容易造成布局松散。
- 使用 box-sizing: border-box; 可让 padding 包含在元素宽度内，便于控制布局。
- 垂直方向上的相邻 margin 会发生“合并”（margin collapse），需注意容器间间距表现。
- 设置 margin: 0 auto; 可实现块级元素水平居中。
- padding 不接受负值，但 margin 可以用负数来压缩空间或重叠元素。