浏览器在缩进的HTML中添加了额外的空间

Question

有这个缩进的HTML代码：

<a href=""> <img src="img/wordpress-logo.svg"> </a>

正如您在下面的图片中看到的那样，浏览器会添加一些额外的空间来创建这个丑陋的连字符。

如果我删除空格并将HTML代码保留在一行中：

<a href=""><img src="img/wordpress-logo.svg"></a>

如下图所示，问题会消失：

为什么这样？我怎么能解决这个问题，因为我想保持所有HTML代码缩进。

（如果你对这个问题有更好的标题，请告诉我，谢谢）

Answer 1

CSS：

a img {
    text-decoration: none;}

Answer 2

<a class="imagelink" href="">
    <img src="img/wordpress-logo.svg">
</a>

这对空白区域很敏感，会产生空间。要删除空间，您确实可以将代码更改为您所执行的操作。但是如果你只想让线消失，可以考虑使用一些css。

a.imagelink { text-decoration: none; }

这将解决视觉效果，但空间将保留。我发布了关于生成的空格的类似问题。 view here

<a href=""><img src="img/wordpress-logo.svg"></a>