blocks|key|417567|text|这是因为你的链接有一个下划线的风格，你确实，从技术上来说，在那里有空格。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|417568|element.style+{
}
user+agent+stylesheet
a:-webkit-any-link+{
++++color:+-webkit-link;
++++cursor:+pointer;
++++text-decoration:+underline;
}|code-block|syntax|javascript|417569|这不是一个真正的bug，但它就在它的边缘。基本上，您想要覆盖链接样式来使用text-decoration:+none;，这不应该是一个问题。你可能需要覆盖所有的州，如:访问和:悬停等.|offset|length|style|CODE|417570|解决方案：<a+style="text-decoration:+none;">...</a>|417571|entityMap^0|0|0|11|M|0|5|15|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

It is because your link has an underline style and you do, technically, have white-space in there.
<pre><code>element.style {
}
user agent stylesheet
a:-webkit-any-link {
 color: -webkit-link;
 cursor: pointer;
 text-decoration: underline;
}
</code></pre>
This isn't really a bug, but it borders on it. Basically you would want to override the link style to use <code>text-decoration: none;</code> and it shouldn't be a problem. You might need to override all the states like a:visited and a:hover etc...
Solution: <code>&lt;a style=&quot;text-decoration: none;&quot;&gt;...&lt;/a&gt;</code>

blocks|key|2690344|text|这不是一个默认的锚下划线样式吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2690345|只需应用风格：|2690346|a+{
++text-decoration:+none;
}|code-block|syntax|javascript|2690347|确保此样式比默认样式具有更大的优先级！|2690348|更多信息：https://www.hongkiat.com/blog/css-priority-level/|offset|length|2690349|entityMap|0|LINK|mutability|MUTABLE|url|https://www.hongkiat.com/blog/css-priority-level/^0|0|0|0|0|5|1D|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Isn't it a default anchor underline style?
Just apply style:
<pre class="lang-css prettyprint-override"><code>a {
 text-decoration: none;
}
</code></pre>
Make sure that this style have bigger priority than default style!
More info: <a href="https://www.hongkiat.com/blog/css-priority-level/" rel="nofollow noreferrer">https://www.hongkiat.com/blog/css-priority-level/</a>

blocks|key|2690421|text|这是空白处理规则(https://www.w3.org/TR/css-text-3/#white-space-processing)的结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2690422|这些规则会使图像变得有点奇怪，因为在某些方面，它们被作为inline来处理，而在其他方面则作为inline-block来处理。换行符、制表符等是通常被忽略或浓缩的空格字符，这样网页的元素就不会受到用来使代码可读性的格式的影响(比如缩进和新行，就像在示例中所做的那样)。但是，这里发生的事情是，--内联元素的空白规则--本质上将任何空白区域(空白字符组)折叠到一个单独的空间中，而不是完全删除它()。|style|CODE|BOLD|2690423|这里出现的原因之一是元素是内联元素，但在语义上更像是块或flex元素。如果将display:block应用于a元素，其行为可能更接近您正在寻找的内容--但这也意味着您将需要一些额外的布局样式(浮点、flex等)。让他们再次并肩作战。就个人而言，如果这是一组图标按钮/链接，我会将它们封装在语义正确的元素(div、list、nav等)中，并将display:flex应用于新的父级。|2690424|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3.org/TR/css-text-3/#white-space-processing^0|9|1K|0|0|S|6|1B|C|42|1F|0|12|D|1I|1|4Q|C|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@$A|X|B|Y|F|G]|$A|Z|B|10|F|G]|$A|11|B|12|F|H]]|9|@]|C|$]]|$1|I|3|J|5|6|7|13|8|@$A|14|B|15|F|G]|$A|16|B|17|F|G]|$A|18|B|19|F|G]]|9|@]|C|$]]|$1|K|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

This is a result of the rules for white space processing (<a href="https://www.w3.org/TR/css-text-3/#white-space-processing" rel="nofollow noreferrer">https://www.w3.org/TR/css-text-3/#white-space-processing</a>).
Images get a little weird with these rules because in some ways they get treaded as <code>inline</code> and in other ways as <code>inline-block</code>. Line breaks, tabs, etc are whitespace characters that usually get ignored or condensed so that the elements of a webpage aren't impacted by the formatting you use to make the code readable (like indenting and new lines, as you're doing in your example). what's happening here, though, is that the whitespace rules for inline elements essentially collapse any whitespace areas (groups of whitespace characters) down to a single space instead of removing it entirely.
One of the reasons this is showing up here is that the element is an inline element, but is being used in a way that's semantically more of a block or flex element. If you apply <code>display:block</code> to the <code>a</code> element, the behavior will probably be closer to what you're looking for - but it will also mean you will need some additional layout styles (float, flex, etc.) to make them appear side-by-side again. Personally, if this is intended to be a group of icon buttons/links, i would wrap them in an element (div, list, nav, etc) that's semantically correct, and apply <code>display:flex</code> to that new parent.

I am using an icon in an image tag to use as a link to my LinkedIn and another for my Github.
Each icon is inside an anchor tag.
When the code is as follow:
<pre><code>&lt;a href=&quot;temp.html&quot; target=&quot;_blank&quot;&gt;
 &lt;img src=&quot;linkedinicon.png&quot;&gt;
&lt;/a&gt;
&lt;a href=&quot;https://github.com/victoriensukarieh&quot; target=&quot;_blank&quot; title=&quot;Github&quot;&gt;
 &lt;img src=&quot;files/img/githubicon.png&quot; height=&quot;30px&quot; width=&quot;30px&quot; style=&quot;border: none;&quot;&gt;
&lt;/a&gt;
</code></pre>
the browser displays an &quot;_&quot; and in the developer tool it shows a &quot;whitespace&quot;.
Formatting the code like this solves the problem:
<pre><code>&lt;a href=&quot;temp.html&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;linkedinicon.png&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;https://github.com/victoriensukarieh&quot; target=&quot;_blank&quot; title=&quot;Github&quot;&gt;
 &lt;img src=&quot;files/img/githubicon.png&quot; height=&quot;30px&quot; width=&quot;30px&quot; style=&quot;border: none;&quot;&gt;
&lt;/a&gt;
</code></pre>
the issue can be seen here <a href="https://jsfiddle.net/vsukarieh/uq60hyjm/1/" rel="nofollow noreferrer">JSFiddle</a>
does anyone have any idea why?

"whitespace" added automatically by browser and display "_" when i put <img> inside <a> (with the <img> on its own line)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我使用图像标记中的一个图标作为指向我的LinkedIn的链接，并为我的LinkedIn使用另一个图标。每个图标都在一个锚标记中。当代码如下：<a href="temp.html" target="_blank"> <img src="linkedinicon.png"></a><a href="https://gi...

问当我将<img>放入<a> (在自己的行上有<img> )时，浏览器自动添加“空格”并显示"_“
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我将<img>放入<a> (在自己的行上有<img> )时，浏览器自动添加“空格”并显示"_“EN