img加padding没反应是因为其默认为inline元素，padding-top/bottom不撑开行高；需设display:block或inline-block才能使四边padding生效，同时建议配合box-sizing:border-box防止尺寸失控。
img加padding为什么没反应
图片默认是inline元素，直接写padding-top或padding-bottom看起来“没效果”，不是代码错了，而是它不撑高行高——只影响背景色和点击热区，文字不会被推开。常见现象：加了padding: 12px;，但图片上下还是紧贴文字。
- 必须先设
display: block;或display: inline-block;，才能让四边padding视觉上生效 - 如果图片在段落里需保持图文同行，用
display: inline-block;比block更安全 -
padding不能为负值，padding-top: -5px;会被浏览器静默忽略
padding设在哪：img本身还是父容器
这是最容易混淆的点：边框和padding归属必须一致，否则尺寸失控。
- 如果边框加在
img上（img { border: 1px solid #ccc; }），那padding也得写给img - 如果边框加在父容器上（比如
.wrap { border: 1px solid #ccc; }），那padding应该写给.wrap，img自身不需要padding - 千万别同时给
img和父容器都加边框+padding，容易叠加出意料之外的总间距
box-sizing: border-box要不要加
加。尤其当图片嵌在固定宽容器（如max-width: 600px的正文）里时，不加就容易溢出。
- 默认盒模型下，
width: 300px; padding: 10px;→ 实际宽度 320px - 加
box-sizing: border-box;后，width包含padding和border，改padding不再撑破布局 - 推荐全局设置：
* { box-sizing: border-box; }，一劳永逸 - 注意：
box-sizing不影响margin，它只管元素自身尺寸计算逻辑
padding用百分比值靠谱吗
慎用。因为padding的百分比永远按父容器**宽度**计算，哪怕你写的是padding-top: 5%;——它和父容器高度无关。
-
padding-top: 5%;= 父容器宽度的 5%，在竖屏手机上可能过大，在横屏平板上又过小 - 想控制上下留白更合理？用
rem（配合根字体响应式）或固定px（配媒体查询）更可控 - 左右
padding用百分比相对安全，毕竟它本就参照宽度
实际应用中，最常踩的坑不是不会写padding，而是忘了display类型切换和box-sizing配合——这两步缺一不可，否则再精确的数值也出不来预期效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
