内边距只对设置了display为block、inline-block、flex、grid等具有明确盒模型的元素有效；默认inline的设padding可能不生效或仅影响左右，需配合display: inline-block使用。
内边距（padding）作用在哪个元素上才有效
内边距只对有明确盒模型的元素起作用，也就是设置了 display 为 block、inline-block、flex、grid 等的元素。像默认 display: inline 的 <span></span> 或 <a></a>，直接设 padding 可能不生效或只影响左右——因为内联元素的上下 padding 虽然渲染了，但不会撑开行高，也不影响其他行内元素的布局。
常见误操作是给 <p></p> 或 <div> 加了 <code>padding 却没看到效果，其实是因为父容器高度被限制（比如写了 height: 50px），或者子元素用了 overflow: hidden 把溢出部分裁掉了。
- 安全做法：优先给
<div>、<code><section></section>、<header></header>这类块级容器加padding - 若要给文字链接加内边距，先加
display: inline-block - 表格单元格必须作用于
<td> 或 <code><th>，不能只写在 <code><table> 上（<code>cellpadding已废弃）padding 的四种写法和适用场景
padding支持单值、双值、三值、四值写法，顺序永远是「上右下左」（顺时针）。别记成 margin 那套逻辑——它俩规则一致，但实际影响不同。例如：
padding: 10px 20px 15px 5px表示上=10px、右=20px、下=15px、左=5px；而padding: 12px 8px是上/下=12px、左/右=8px。- 单值（
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></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 的盒模型视图，比猜三次更省时间。 - 单值（
