内边距只对设置了display为block、inline-block、flex、grid等具有明确盒模型的元素有效；默认inline的<span><a>设padding可能不生效或仅影响左右，需配合display: inline-block使用。
内边距（padding）作用在哪个元素上才有效
内边距只对有明确盒模型的元素起作用，也就是设置了 display 为 block、inline-block、flex、grid 等的元素。像默认 display: inline 的 <span> 或 <a>，直接设 padding 可能不生效或只影响左右——因为内联元素的上下 padding 虽然渲染了，但不会撑开行高，也不影响其他行内元素的布局。
常见误操作是给 <p> 或 <div> 加了 padding 却没看到效果，其实是因为父容器高度被限制（比如写了 height: 50px），或者子元素用了 overflow: hidden 把溢出部分裁掉了。
- 安全做法：优先给
<div>、<section>、<header>这类块级容器加padding - 若要给文字链接加内边距，先加
display: inline-block - 表格单元格必须作用于
<td>或<th>，不能只写在<table>上（cellpadding已废弃）
padding 的四种写法和适用场景
padding 支持单值、双值、三值、四值写法，顺序永远是「上右下左」（顺时针）。别记成 margin 那套逻辑——它俩规则一致，但实际影响不同。
例如：padding: 10px 20px 15px 5px 表示上=10px、右=20px、下=15px、左=5px；而 padding: 12px 8px 是上/下=12px、左/右=8px。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 单值（
padding: 16px）：所有方向统一，适合卡片、按钮这类需要等距呼吸感的容器 - 双值（
padding: 24px 16px）：常用于导航栏或表单项，上下留白大些便于点击，左右紧凑些节省横向空间 - 三值（
padding: 10px 12px 6px）：上=10px、右=12px、下=6px、左=12px；适合标题区域——下边距小一点，避免和正文距离过大 - 四值必须按顺时针写，错序会导致上下左右全乱
padding 影响宽高计算的两个关键点
默认情况下，width 和 height 只管内容区尺寸。如果你设了 width: 200px + padding: 10px，那整个盒子实际占宽是 220px（200 + 左右各10）。这在响应式布局里容易导致横向溢出或换行异常。
解决办法是统一加 box-sizing: border-box，这样 width 就包含 padding 和 border 在内，数值更可控。
- 推荐在项目开头就写：
* { box-sizing: border-box; } - 但注意：表单控件（如
<input>、<textarea>）在某些浏览器里默认是content-box，单独重置更稳妥 - 如果用
max-width: 100%配合padding，记得检查是否触发了最小宽度挤压（尤其在小屏上）
和 margin 混用时最容易踩的坑
很多人想靠 padding 把内容“推离”边框，结果发现相邻元素贴得太近——其实是忘了 margin 才负责元素间的距离，padding 只管自己肚子里那块地。
典型错误：给按钮加 padding: 12px 后，两个按钮并排时紧挨着，以为 padding 不够大；实际上该给按钮加 margin-right: 8px 才对。
- 口诀：padding 是“内部留白”，margin 是“外部间距”
- 父子元素间慎用上下 padding + margin 组合，可能触发外边距合并（margin collapse）
- 用
padding实现“点击热区扩大”时，别忘了同时调大font-size或行高，否则文字会显得太小、拥挤
真正难的不是写对 padding 值，而是判断这个留白该由谁来承担：是父容器的 padding，还是子元素的 margin，抑或是用 gap（Flex/Grid）来解耦。多看一眼 DevTools 的盒模型视图，比猜三次更省时间。
