tại sao tôi nhận được dấu gạch ngang nhỏ trong thẻ neo?

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> 

Tôi có nút tạo bằng cách sử dụng thẻ img trong neo. lý do tại sao tôi nhận được dấu gạch ngang nhỏ ở góc bên phải ??

cảm ơn trước

Answer 1

Có một mặc định text-decoration:underline kết hợp với một neo <a> thẻ. Vì có một khoảng trống trong số <a> </a>, gạch dưới là dòng bạn nhìn thấy.

Sử dụng text-decoration:none trên <a>, điều đó sẽ giải quyết được.

a { 
    text-decoration: none; 
} 

Answer 2

này dường như xảy ra khi:

• đóng thẻ neo là trên một dòng riêng biệt với phần còn lại của phần tử
• VÀ văn bản rõ ràng của neo được một hình ảnh
• VÀ bạn có nhiều hình ảnh trên cùng một dòng

• và cả neo/hình ảnh không phải là mục cuối cùng trong chuỗi ngang

  Trong ví dụ sau đây, bạn sẽ không nhìn thấy dấu gạch ngang sau khi những hình ảnh thứ ba và thứ năm, nhưng những hình ảnh khác sẽ hiển thị một dấu gạch ngang ở bên phải của hình ảnh/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>

Tôi không thể tìm thấy bất kỳ thông tin nào để nói nếu điều này vi phạm quy tắc HTML về việc chia tách các phần tử trên nhiều dòng. Tôi đã sao chép cùng một vấn đề trong Chrome, Firefox và IE 11.

Tôi chỉ có thể đoán rằng một không gian đang được thêm sau hình ảnh, vì thẻ đóng nằm trên một dòng riêng biệt. Và điều này liên quan đến các câu trả lời được đưa ra ở trên - không gian được tự động tạo kiểu với gạch dưới. Nhưng tôi không biết tại sao không gian được thêm vào sau một hình ảnh nhưng không phải sau khi văn bản, hoặc tại sao điều này chỉ xảy ra khi các hình ảnh trên cùng một dòng.

Answer 3

<a> là phần tử nội tuyến. Nếu bạn để khoảng trống giữa các phần tử kèm theo và phần tử </a>, nó sẽ được định dạng tự động, có dấu gạch dưới.