<a> element

Question

I'm trying to use a text as a link, but I fails with 2 things: 1. There is a blank space between the 2 span elements but I failed to remove it (margin-right and margin-left did nothing):

中的2个span元素存在问题

1. 当我将鼠标悬停在rapitec span元素上时，我得到一个指针光标，而当我将鼠标悬停在.com span元素上时得到了默认光标。

HTML：

<a href="index.html">
  <span style="margin-right: 0; border: solid;" id="logoText">rapitec</span>
  <span style="margin-left: 0; border: solid;" id="logoPrefix">.com</span>
</a>

Answer 1

<span>是一个内联元素，并且内联元素之间的所有空格（包括换行符）都显示为单个空格。

您可以删除换行符以使其按需工作：

<a href="index.html">
  <span style="margin-right: 0; border: solid;" id="logoText">rapitec</span><span style="margin-left: 0; border: solid;" id="logoPrefix">.com</span>
</a>

另一种选择是对跨接元素使用CSS float:left，但是如果您不仔细做的话，可能会对布局产生其他不良影响。

关于您的2）鼠标指针问题：我在这里无法重现它，并且在您发布的内容中也看不到任何可能引起它的东西。

Answer 2

解决空白问题的方法：

1. 确保没有空格：

<a href="index.html"><span style="border: solid;" id="logoText">rapitec</span><span style="border: solid;" id="logoPrefix">.com</span></a>

1. 使用display: flex;：

.flexcontainer { display: flex; }

<a href="index.html" class="flexcontainer">
  <span style="border: solid;" id="logoText">rapitec</span>
  <span style="border: solid;" id="logoPrefix">.com</span>
</a>

1. 设置父元素的font-size: 0;并在子元素上重新设置：

.inlineblock-container { font-size: 0; }

.inlineblock-container * { font-size: 16px; }

<a href="index.html" class="inlineblock-container">
  <span style="border: solid;" id="logoText">rapitec</span>
  <span style="border: solid;" id="logoPrefix">.com</span>
</a>

您的摘要中似乎没有其他问题。