CODEWITHSUNDEEP
htmlanchorimage
Akki
Akki

Reputation: 1778

why I am getting small dash in anchor tag?

<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>

I have create button by using img tag within anchor. why I am getting small dash at right corner??

thanks in advance

Upvotes: 12

Views: 8837

Answers (3)

user6275623
user6275623

Reputation:

<a> is an inline element. If you leave space between enclosed elements and the </a> element, it will be formatted automatically which is with an underscore.

Upvotes: 1

Jake
Jake

Reputation: 41

This appears to happen when:

  • the closing anchor tag is on a separate line from the rest of the element
  • AND the visible text of the anchor is an image
  • AND you have multiple images on the same line

  • and also the anchor/image is not the last item in the horizontal series

    In the following example, you will not see dashes after the third and fifth images, but the other images will show a dash to the right of the image/link:

<p>
	<a href="#">
	<img src="image.jpg" alt="Test 1" />
	</a>

	<a href="#"><img src="image.jpg" alt="Test 2" />
	</a>

	<a href="#">
	<img src="image.jpg" alt="Test 3" /></a>

	<a href="#"><img src="image.jpg" alt="Test 4" />
	</a>

	<a href="#"><img src="image.jpg" alt="Test 5" />
	</a>
</p>

I can't find any information to say if this is a violation of an HTML rule regarding splitting elements across multiple lines. I replicated the same issue in Chrome, Firefox and IE 11.

I can only guess that a space is being added after the image, since the closing tag is on a separate line. And this relates to the answers given above - the space is being automatically styled with an underline. But I don't know why the space is added after an image but not after text, or why this only happens when the images are on the same line.

Upvotes: 4

Pranav 웃
Pranav 웃

Reputation: 8477

There is a default text-decoration:underline associated with an anchor <a> tag. Since there is a space in the <a> </a>, that underline is the line you see.

Use text-decoration:none on <a>, that should solve it.

a {
    text-decoration: none;
}

Upvotes: 29

Related Questions