padding是控制内容与边框距离的唯一标准方式，通过设置上下左右内边距实现内部留白，配合box-sizing:border-box可确保尺寸稳定，内联元素需配合display和line-height使用。
padding 是控制内容与边框距离的唯一标准方式
盒模型中，padding 就是专门用来定义内容区域（content）到 border 之间的空白区域。它不改变元素尺寸计算逻辑（除非你改了 box-sizing），但直接决定文本、图片等子元素离边框有多远。
常见误区是试图用 margin 或调整 font-size 来“推远”文本——这无效，margin 控制的是元素自身与其他元素的距离，不影响内部留白。
padding 的四个方向写法和简写规则
你可以分别控制上右下左： padding-top、padding-right、padding-bottom、padding-left；更常用的是简写 padding 属性：
-
padding: 10px→ 四边都是 10px -
padding: 12px 20px→ 上下 12px，左右 20px -
padding: 8px 16px 12px 24px→ 顺时针：上右下左
注意：值必须是长度单位（px、em、rem）或 0；不能用百分比（除非父容器有明确高度，且仅对 padding-top/padding-bottom 有时生效，但不可靠）。
立即学习“前端免费学习笔记（深入）”；
box-sizing: border-box 会让 padding 更直观
默认 box-sizing: content-box 下，设置 width: 200px; padding: 10px; 会导致实际占位宽度变成 220px（200 + 左右 padding）。很多人因此觉得 “padding 让盒子变大了”，其实是预期错位。
加一行就解决：box-sizing: border-box。此时 width 包含 content + padding + border，padding 只压缩内容区，不撑开外尺寸：
div {
width: 200px;
padding: 15px;
border: 1px solid #ccc;
box-sizing: border-box; /* 关键 */
}这样文本到边框的距离就是稳定 15px，且整体宽度严格保持 200px。
内联元素（如 span）设 padding 的注意事项
span 这类默认 display: inline 的元素，设 padding 能生效，但上下 padding 不会撑开行高（line-height），可能被相邻行文字“覆盖”或视觉错位。
如果目的是让文本四周都有呼吸感，稳妥做法是：
- 改为
display: inline-block或display: inline-flex - 确保父容器有足够
line-height（比如line-height: 1.5） - 避免只设
padding-top/padding-bottom而不设左右——容易导致水平对齐异常
真正要微调单行文本与边框距离时，padding 本身没问题，但 display 类型和行高配合才是关键。
