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

Question

缩进 HTML 代码：

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

正如您在下图中看到的，浏览器添加了一些额外的 space 来创建丑陋的连字符。

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

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

问题消失，如下图所示：

为什么会这样？我要如何解决这个问题，因为我想保留所有 HTML 代码缩进。

(p.s。如果您对此问题有更好的标题，请告诉我，谢谢)

Answer 1

CSS:

a img {
    text-decoration: none;}

Answer 2

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

这对白色 space 敏感，会生成一个 space。要删除 space，您确实可以将代码更改为您所做的。但是如果你只是想让这条线消失，可以考虑使用一些 css.

a.imagelink { text-decoration: none; }

这将解决视觉问题，但 space 将保留。我发布了一个关于 generated whitespace 的模拟问题。 view here

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

Browser adds extra space in indented HTML