img加padding没反应是因为其默认为inline元素，padding-top/bottom不撑开行高；需设display:block或inline-block才能使四边padding生效，同时建议配合box-sizing:border-box防止尺寸失控。
padding 加在 img 上没反应，不是代码写错了，而是它默认是 inline 元素，padding-top 和 padding-bottom 不撑开行高——只影响背景色和点击热区，文字不会被推开。必须先改显示模式，再配盒模型，否则数值再准也白搭。
为什么 img 加 padding 看起来“无效”
常见现象：写了 padding: 12px;，但图片上下还是紧贴文字，左右却有空隙。这是因为 img 是替换型行内元素，其 padding-top/padding-bottom 会作用在行框内部，但不改变行高，也不推开相邻文本。
- 仅设
padding-left/padding-right通常能看见效果（左右边距不影响行高） -
padding-top和padding-bottom在 inline 模式下视觉上“消失”，其实是被压缩进行框了 - 加了
background-color就能验证：背景色确实扩展了，但文字位置没变
display: block 或 inline-block 怎么选
目标不同，选法不同。关键看图片是否需要和文字保持同行流式布局。
- 独立展示图、卡片图、居中图 → 用
display: block;，四边padding全生效，且方便后续加margin: 0 auto;居中 - 图文混排（比如图标+文字）、需对齐基线 → 用
display: inline-block;，保留内联流，同时让padding四边都起作用 - 别用
display: inline;配padding—— 垂直方向依然不可靠 - 如果父容器已是
flex或grid，img自动变成块级行为，此时可不加display声明
padding 该加给 img 还是父容器
取决于边框（border）加在哪。边框和 padding 必须归属同一元素，否则尺寸逻辑混乱。
- 边框加在
img上：img { border: 1px solid #ccc; padding: 10px; }→padding必须也写给img - 边框加在父容器上：
.wrap { border: 1px solid #ccc; padding: 10px; }→padding写给.wrap，img自身清空所有padding和border - 严禁混用：同时给
img和.wrap加border+padding，总间距 = 父padding+ 子padding+ 双层border，极易溢出或错位
box-sizing: border-box 为什么不能省
默认盒模型下，width: 300px; padding: 12px; 实际占用宽度是 324px（内容宽 + 左右 padding）。这对响应式布局尤其危险。
- 加
box-sizing: border-box;后，width包含padding和border，改padding不会撑破容器 - 推荐全局设置：
* { box-sizing: border-box; }，一劳永逸，避免漏写 -
box-sizing不影响margin，它只管元素自身尺寸计算逻辑 - 百分比
padding（如padding-top: 5%;）仍按父容器宽度计算，与高度无关——想控制上下留白，优先用固定px或rem配合媒体查询
真正卡住人的从来不是“怎么写 padding”，而是忘了切 display 类型、忘了配 box-sizing、以及边框和 padding 归属不一致——这三步缺一不可，少一个，布局就容易在某个设备或嵌套层级里突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
