html - 为什么我在 anchor 标签中出现小破折号？

Question

<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br>

我在 anchor 中使用 img 标签创建了按钮。 为什么我在右角出现小破折号？？

提前致谢

Answer 1

有一个默认的text-decoration:underline与 anchor 关联 <a>标签。由于<a> </a>中有空格，下划线就是您看到的那条线。

使用 text-decoration:none在 <a> ，应该可以解决。

a {
    text-decoration: none;
}