img 标签下多余空白的解决方法

当我们在网页中插入图片时，使用 img 标签是最常见的方式之一，不过有时我们会发现图片周围有多余的空白，这时可以用以下两种方法解决。

方法一：float 属性

我们可以使用 float 属性将图片向左或向右浮动，这样文本就会环绕在图片周围，不会出现多余空白。示例如下：

<div style="overflow:auto;">
  <img src="image.jpg" style="float:left; margin-right:10px;">
  <p>在这里插入文本。在这里插入文本。在这里插入文本。</p>
</div>

这里我们用 div 标签将 img 标签和 p 标签包裹起来，然后设置 overflow:auto; 以处理浮动问题。img 标签加上了 float:left; 属性，向左浮动，右边留下 margin-right:10px; 空白。如果需要向右浮动，则将 left 替换为 right 即可。

方法二：display:block

我们还可以将 img 标签的 display 属性设置为 block，并且将 margin 设置为 0，这样就可以消除多余空白。示例如下：

<div>
  <img src="image.jpg" style="display:block; margin:0 auto;">
  <p>在这里插入文本。在这里插入文本。在这里插入文本。</p>
</div>

这里我们同样用 div 标签包裹 img 标签和 p 标签，然后将 img 标签的 display 属性设置为 block，这样就可以占据整个行的宽度，不会出现多余空白。margin:0 auto; 则将 img 标签水平居中。这种方法适用于图片宽度小于容器宽度的情况。

综上所述，以上两种方法都能解决 img 标签下多余空白的问题，根据场景具体选择即可。