用 margin 控制图片周围空白最直接有效，但需将图片设为 display: block 以确保四边 margin 稳定生效；inline 图片受行高影响，垂直 margin 可能异常。
用 margin 控制图片周围空白最直接有效
HTML5 本身没有专门设置图片边距的属性，<img alt="HTML5如何设置图片边距_HTML5设置图片边距方法【间距】" > 标签的 align、hspace、vspace 等旧属性早已被废弃。现在统一用 CSS 的 margin（或 padding）控制间距，这是唯一可靠且符合标准的做法。
常见误区是给 <img alt="HTML5如何设置图片边距_HTML5设置图片边距方法【间距】" > 加 style="max-width:90%" 后发现上下没反应——那是因为图片默认是 inline 元素，受行高和基线影响，垂直 margin 可能“失效”或表现异常。
- 想让上下左右 margin 都稳定生效，优先给图片加
display: block - 若图片在段落中需保持内联流式布局，改用
vertical-align: middle配合 margin 调整对齐 - 避免混用
margin和已废弃的hspace/vspace，后者在现代浏览器中完全无效
margin 四个方向怎么写才不踩坑
图片边距本质就是 CSS 盒模型的外边距，但新手常因写法模糊导致效果不符预期。关键看是否需要统一值、对称值，还是独立控制某一边。
-
margin: 10px→ 四边都是 10px -
margin: 10px 20px→ 上下 10px，左右 20px（顺时针：上右下左，两值时是「上下/左右」） -
margin: 10px 20px 30px 40px→ 顺时针：上 10px、右 20px、下 30px、左 40px - 只设单边？用
margin-top、margin-right等更明确，避免歧义
特别注意：margin 会塌陷（如两个相邻块级元素的上下 margin 会合并），但图片设为 block 后一般不涉及此问题；若父容器有 overflow: hidden，过大的负 margin 可能被裁剪。
立即学习“前端免费学习笔记（深入）”；
图片作为背景时，margin 不起作用怎么办
如果用 background-image 替代 <img alt="HTML5如何设置图片边距_HTML5设置图片边距方法【间距】" > 标签，那它就不是独立元素，而是容器的装饰层——此时 margin 是作用在容器上的，不是“图片边距”。想控制背景图和容器边缘的距离，得换思路：
- 用
background-position移动背景图自身位置（如background-position: 20px 10px） - 用
background-origin改变参考原点（默认是padding-box，可设为content-box） - 真正要留白？靠容器的
padding或margin实现，而非操作背景图
别试图给 div 设 margin 然后以为那是“背景图的边距”——它只是容器的位置偏移。
响应式场景下图片边距怎么自适应
固定像素的 margin: 10px 在小屏上可能撑破布局。用相对单位更稳妥：
-
margin: 1em→ 基于当前字体大小，适合文字流环境 -
margin: 2%→ 相对于父容器宽度，左右边距随屏幕缩放（注意：百分比 margin 的上下值也按父宽计算，非父高） - 媒体查询分段控制：
img { margin: 10px; }<br>@media (max-width: 768px) {<br> img { margin: 5px; }<br>}
复杂布局建议用 Flex 或 Grid 容器统一管理子项间距（如 gap 属性），比每个图片单独设 margin 更干净、易维护。比如：
.gallery { display: flex; gap: 12px; }<br>.gallery img { display: block; } 这样所有图片间隙自动对齐，无需重复写 margin。
实际项目里，边距问题往往不是“怎么加”，而是“加在哪一层”——是图片自身、其父容器、还是图文组合的包裹盒。定位错一层，再调 margin 也没用。
