dlaczego otrzymuję małą kreskę w znaczniku kotwicy?

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> 

Mam przycisk Utwórz za pomocą znacznika IMG w kotwicy. dlaczego dostaję małą kreskę w prawym rogu ??

góry dzięki

Answer 1

Jest domyślnym text-decoration:underline związane z kotwicą <a> tagu. Ponieważ w modelu <a> </a> znajduje się spacja, podkreślenie jest linią, którą widzisz.

Użyj text-decoration:none na <a>, który powinien rozwiązać problem.

a { 
    text-decoration: none; 
} 

Answer 2

Wydaje się to zdarzyć, gdy:

• zamykanie kotwica znacznik jest na osobnej linii od reszty elementu
• a widocznym tekstem kotwicy jest obraz
• I masz wiele zdjęć na tej samej linii

• , a także kotwica/obraz nie jest ostatnim elementem w serii poziomej

  W poniższym przykładzie, nie będzie widać kreski po trzecim i piątym obrazów, ale inne obrazy pokaże kreskę z prawej strony obrazu/link:

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

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

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

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

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

Nie mogę znaleźć żadnych informacji, które można by określić, jeśli jest to naruszenie reguły HTML dotyczącej dzielenia elementów na wiele linii. Powtórzyłem ten sam problem w Chrome, Firefox i IE 11.

Mogę tylko zgadywać, że spacja jest dodawana po obrazie, ponieważ znacznik zamykający znajduje się w osobnej linii. Dotyczy to odpowiedzi podanych powyżej - przestrzeń jest automatycznie stylizowana za pomocą podkreślenia. Ale nie wiem, dlaczego przestrzeń jest dodawana po obrazie, ale nie po tekście, lub dlaczego dzieje się tak tylko wtedy, gdy obrazy są na tej samej linii.

Answer 3

jest elementem śródliniowym. Jeśli pozostawisz przestrzeń między zamkniętymi elementami a elementem </a>, zostanie ona sformatowana automatycznie, co jest podkreśleniem.