All geek questions in one place

Why is there a sign - (dash) or _ (underline) between <a> images

Can someone explain why I see two dashes (or underscores) between my images, for example:

enter image description here

How to remove them?

This strange behavior appears in chrome (linux), safari (mac), and also in firefox (mac).

<html> <head> <style type="text/css" media="screen"> ul li { display: inline; } </style> </head> <body style="background: none;"> <ul clas=""> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"> <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"> </a> </li> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"> <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"> </a> </li> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"> <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"> </a> </li> </ul> </body> </html>
+5
source share
6 answers

This is not an underline, this is an underline of a link. Pay attention to your markup:

 <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"> <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"> </a>

There are spaces before and after img in a . If elements are styles for underlining, these spaces will be underlined.

You can remove spaces:

 <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a>

and / or you can change the style:

 a { text-decoration: none; }
+8
source

just set text-decoration: none to a tags in your CSS

 a{ text-decoration: none; }
+2
source

You need this html:

 <a ...><img /></a> ^------^---- no spaces/linebreaks.

Line breaks in the html source are displayed as whitespace. Thus, the standard link / underline display extends the PAST edge of your image to the width of the space in which your line breaks appear as.

+2
source

This is because it is wrapped in a link. You will need to remove the underline using CSS.

 .myListWithoutUnderlines a{ text-decoration: none; } .myListWithoutUnderlines li { display: inline; } 
 <ul class="myListWithoutUnderlines"> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"> <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"> </a> </li> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"> <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"> </a> </li> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"> <img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"> </a> </li> </ul>
+1
source

Underscore characters are triggered by the browser, registering a space after the image, before the closing </a> tag. To counteract this, you need to remove the indent:

 <html> <head> <style type="text/css" media="screen"> ul li { display: inline; } </style> </head> <body style="background: none;"> <ul class=""> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a> </li> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a> </li> <li> <a href="file:///dir/file.jpg" rel="prettyPhoto" title="This is title"><img src="file:///thumbnails/t.jpg" width="60" height="60" alt="Hi"></a> </li> </ul> </body> </html>
+1
source

As your HTML code is written, there is a space before <img> before </a> , which the browser applies the binding style (underline).

I would recommend doing something like (CSS) a img { display: block; float: left; } a img { display: block; float: left; }

0
source

Source: https://habr.com/ru/post/1209735/

More articles:


All Articles