浮动图片的 margin 中，左浮动时 margin-right、右浮动时 margin-left 才真正影响文字环绕间距；上下边距仅影响图片自身垂直位置及与其他块级元素距离。
直接加 margin 是对的，但只加一边往往没用，甚至会破坏布局。
浮动图片的 margin 哪些方向真正起作用
浮动元素（比如 float: left）的文字环绕行为，受的是「外侧」边距影响：文字不会挤进图片的 margin 区域，但会绕开它。关键点是——
-
margin-left（左浮动时）或margin-right（右浮动时）决定文字离图最近那条边的距离，这个最常用 -
margin-top和margin-bottom会影响图片自身在流中的垂直位置，但不直接影响环绕文字的水平间距 -
margin四边同设时，只有左右边距参与文字避让；上下边距只影响图片和其他块级元素的间距
为什么有时加了 margin 文字还是贴着图片
常见原因不是代码写错，而是 CSS 层叠或默认行为干扰：
- 父容器设置了
overflow: hidden或auto，可能触发 BFC，间接压缩可用环绕空间 - 图片本身没有设置
display: block，导致margin在内联场景下表现异常（<img alt="CSS如何控制浮动图片和环绕文字的距离_直接给浮动图片加上对应的margin" >默认是 inline 元素） - 文字容器（如
p）有负的margin或padding，抵消了图片的margin - 用了
margin: 10px却只观察左边——其实左右都加了 10px，文字只从一侧环绕，另一侧空着也正常
推荐写法：用 margin + display 显式控制
稳定生效的最小配置组合：
立即学习“前端免费学习笔记（深入）”；
img.float-left {
float: left;
margin-right: 16px; /* 文字在右边，所以控制右距 */
margin-bottom: 8px; /* 防止下一行文字顶到图底 */
display: block; /* 避免 inline 带来的 baseline 对齐干扰 */
}如果要适配响应式，优先用 margin-right 而非 margin 简写，避免小屏幕下右侧留白过大。
浮动本身正在被现代布局（如 display: flow-root、shape-outside）替代，但只要还在用 float，margin-right 或 margin-left 就是最直接有效的间距控制手段——前提是图片得是块级元素，且没被其他规则悄悄覆盖。
