margin-right对左浮动图片没效果，根本原因是图片仍为inline元素，其外边距被行框限制；应显式设float: left并配合margin-right，或改用display: block消除基线空隙。
margin 是最直接、最可控的方式，但必须结合图片的显示模式和对齐行为一起调整，否则容易出现“加了边距没反应”或“底部多出空白”这类问题。
为什么 margin-right 对左浮动图片没效果？
常见现象：给 <img align="left"> 加了 style="max-width:90%"，但文本依然紧贴图片右侧。
- 根本原因不是样式没生效，而是图片仍被当作行内元素参与文本流，
margin-right被计算在行框内部，而环绕文本可能已换行或受行高挤压 - 更可靠的做法是显式声明
float: left;（而非依赖过时的align属性），再配margin-right - 若使用现代布局（如
display: flex或grid），则不应再用float，此时应给图片本身设margin-inline-end或直接控制容器gap
img 底部总有一条小空隙，怎么彻底去掉？
这是 HTML/CSS 中最常被忽略的兼容性细节：图片默认是 inline 元素，会按基线（baseline）对齐，而基线以下预留了字母“g”“y”等下降部分的空间，导致视觉上图片下方有约 3–5px 空白。
- 首选方案：
img { display: block; }—— 彻底脱离行内流，空隙消失 - 次选方案：
img { vertical-align: bottom; }—— 对齐到父容器底边，不破坏行内上下文（适合需保留文字环绕的场景） - 避免用
margin-bottom: -4px;这类魔数修复，不同字体、字号下空隙高度会变
多个图片并排时，怎么统一控制间距？
逐个写 margin-right 容易漏、难维护，尤其当图片数量动态变化时。
- 用 Flex 布局最干净：
.gallery { display: flex; gap: 16px; }，所有子img自动获得等距间隙 - 若必须用浮动旧方式，推荐只给非首张图加左外边距：
img:not(:first-child) { margin-left: 16px; } - 慎用
margin: 0 8px;这类简写——它会给上下也加 0，可能意外压缩垂直节奏
真正麻烦的从来不是“怎么加边距”，而是加在哪一层、影响哪些上下文。比如 margin 在 inline 和 block 模式下表现不同，float 会触发 BFC 改变父容器高度计算，而 gap 只对 Flex/Grid 容器有效——这些边界条件，才是实操中卡住最多人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
