padding会撑大盒子因它属于元素内部空间，增加内容与边框距离并扩大总尺寸；margin不撑大盒子因它属于外部空间，只推远相邻元素而不改变自身大小。
padding 是给图片加四周内边距的正确方式，但它会影响边框位置和元素尺寸计算——不是所有场景都该用它。
为什么直接写 padding 可能没效果？
常见现象：图片加了 padding: 20px;，但页面看起来没变化，或边框“飘”在外面。这是因为：
- 图片默认是
inline元素，padding-top和padding-bottom对行内元素垂直方向不生效（除非设置display: inline-block或block） - 父容器没设
border或背景色，导致padding区域不可见 - 浏览器对
img的默认vertical-align值（如baseline）会引发底部留白，掩盖了padding效果
padding 和 margin 到底该选哪个？
关键判断依据是：你想要的空间，是在图片「内部」还是「外部」？
- 想让图片内容离边框更远（比如加背景色后避免贴边），用
padding—— 它会撑大元素整体尺寸，且包含在border内部 - 想让图片和其他元素保持距离（比如上下两张图不挤在一起），用
margin—— 它不改变图片自身尺寸，只影响外部布局流 - 常见误用：
padding被用来“隔开相邻图片”，结果导致边框变大、尺寸失控，此时应换margin
实操时必须加的配套声明
单独写 padding 很容易踩坑，这三样最好一起配：
立即学习“前端免费学习笔记（深入）”；
- 把图片设为
display: block;或display: inline-block;，确保四边padding都生效 - 显式定义
border（哪怕border: 1px solid transparent;），否则padding区域看不见 - 加上
box-sizing: border-box;，让width和height包含padding，避免意外溢出
示例：
img {
display: block;
padding: 12px;
border: 1px solid #eee;
box-sizing: border-box;
}
响应式内边距怎么写才可靠？
百分比 padding（如 padding: 5%;）是基于父容器宽度计算的，对图片高度控制不直观，容易在窄屏下过小、宽屏下过大。
- 优先用固定值（
px、rem），语义清晰、行为可预测 - 如果必须用百分比，只用于水平方向（
padding-left/padding-right），并配合max-width限制父容器 - 移动端慎用
padding控制图片间距，改用margin+ 媒体查询更稳妥
真正难的不是写对那行 padding，而是每次加之前先问一句：这个空白，到底是属于图片自身的“呼吸感”，还是它和邻居之间的“安全距离”。选错就等于把布局逻辑埋进盒模型底层，后面调起来全是隐性成本。
