Padding 属性总结特点
性格温和：用于设置元素内容与边框之间的内边距，对外部布局影响小。
尺寸规则：
默认 box-sizing: content-box，padding 会增加元素总尺寸。
设置 box-sizing: border-box 后，padding 包含在宽高内，但大 padding 可能会导致内容尺寸不足。
百分比计算：无论水平方向还是垂直方向，padding 的百分比值均相对于宽度计算。
对内联元素的作用：垂直和水平 padding 均有效，但仅影响视觉表现，不改变布局间距。
实用场景
增加点击区域：优雅地扩大按钮或链接的点击区域。
等比例布局：利用百分比 padding 创建正方形或固定宽高比的矩形。
图形绘制：结合 background-clip 实现复杂形状。
示例
扩大点击区域
a { padding: 10px; background-color: #007BFF; color: white; text-decoration: none; display: inline-block;}
等比例矩形
.div { width: 50%; padding-top: 25%; /* 高度是宽度的50% */ background-color: gray;}
简单分隔符
a + a::before { content: ""; display: inline-block; width: 1px; height: 20px; background-color: gray; margin: 0 10px;}Margin 属性总结特点
性格激进：设置元素与其他元素之间的外边距，影响布局和尺寸。
尺寸规则：
margin 不会影响固定宽高的元素尺寸，但对宽高为 auto 的流式布局有效。
负值 margin 可用来调整或叠加元素布局。
百分比计算：与 padding 一样，基于宽度计算，但实际效果有限。
合并规则：垂直方向相邻块元素的 margin 会发生合并，取较大值。
实用场景
自适应布局：通过负 margin 调整元素宽度或创建两端对齐布局。
等高布局：通过负 margin 和正 padding 模拟两列等高。
滚动容器留白：使用子元素 margin 替代 padding-bottom 解决兼容性问题。
示例
两端对齐布局
ul { margin-right: -20px;}ul > li { float: left; width: calc(33.33% - 20px); /* 减去间隙 */ margin-right: 20px;}
等高布局
.container { overflow: hidden;}.column { float: left; width: 50%; margin-bottom: -9999px; padding-bottom: 9999px; background-color: lightgray;}
滚动容器留白
.container { height: 300px; overflow-y: scroll;}.item { height: 500px; margin-bottom: 50px; /* 留白 */}
负 margin 调整
.box { margin-left: -50px; /* 向左拉伸 */ padding-left: 50px; /* 恢复内容内间距 */}核心对比
属性 作用 百分比计算 应用场景
Padding 内间距，影响内容布局 基于宽度计算 点击区域、等比例布局
Margin 外间距，影响外部布局 基于宽度计算 流式布局、对齐、留白
通过灵活使用两者，可以高效实现复杂的布局需求，同时解决实际开发中的问题，如点击区域扩大、动态布局适配等