HTML spaces without the underline-CodePudding

I have the following HTML code

<div >
  <a href="/assets/PingID/pingid-setup.html"  target="_blank" rel="noopener noreferrer">
    <img src="/assets/PingID/PingID.jpg" alt="PingID">&nbsp;&nbsp;&nbsp;&nbsp;<span style="">PingID Setup</span></a>

</div>

The problem for me is the underscore lines between the image and the text. How can I remove the underscore link between the image and the text?

stuff to fix

CodePudding user response：

By default, a elements have the text-decoration: underline property. Since you have an img and white-space in your link, you need to give your link a style using CSS/inline styling to change this. Then you can give the span itself an underline if you want the text to retain its underline.

a{
  text-decoration: none;
}

span{
  text-decoration: underline;
}

<a href="#">test test test <span>link</span></a>

Edit: As some of the commenters have pointed out, this might not be answering your question sufficiently, and might be teaching you a bad practice.

To clarify, I am trying to demonstrate that there is an inherent property to the a element that causes all of its children to have an text-decoration: underline attribute.

In your specific case, I would recommend doing something like this:

.logo {
  margin: 0 30px 0 0;
}

<div >
  <a href="/assets/PingID/pingid-setup.html"  target="_blank" rel="noopener noreferrer">
    <img  src="/assets/PingID/PingID.jpg" alt="PingID"><span style="">PingID Setup</span></a>

</div>

Here, we remove your   elements and then apply a margin property to the right side of your image to recreate the lost space. Margin in my example is a shorthand to allow you to set the margin property on any given side from top, right, bottom and left respectively.

CodePudding user response：

since it is the image is covered in a tag which will act as a link you can use this style:
a{ text-decoration: none; }

to remove the underline in your text.

CodePudding user response：

You can add a margin to the <span> and avoid the need to add (force) blank spaces between the image and the text.

See below:

span {
  margin-left: 10px;
}

<div >
  <a href="/assets/PingID/pingid-setup.html"  target="_blank" rel="noopener noreferrer">
    <img src="https://via.placeholder.com/100x25/aaa/fff" alt="PingID"><span>PingID Setup</span>
  </a>
</div>

CodePudding user response：

you are using non breaking space between image and span element. remove this

img{
  width:100px;
}

<div >
  <a href="/assets/PingID/pingid-setup.html"  target="_blank" rel="noopener noreferrer">
    <img src="https://cdn-icons-png.flaticon.com/512/1215/1215840.png?w=740&t=st=1660679446~exp=1660680046~hmac=28860ef42c9d54aa4989079dd44f65feb033eef70bb648ad2362d0f32e17a1ea" alt="PingID">
    <span style="">PingID Setup</span></a>

</div>