मुझे एंकर टैग में छोटे डैश क्यों मिल रहे हैं?

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> 

मैंने एंकर के अंदर आईएमजी टैग का उपयोग कर बटन बनाया है। मुझे दाहिने कोने पर छोटे डैश क्यों मिल रहे हैं ?? अग्रिम

Answer 1

में

धन्यवाद वहाँ एक डिफ़ॉल्ट text-decoration:underline एक लंगर <a> टैग के साथ संबद्ध है। चूंकि <a> </a> में कोई स्थान है, इसलिए वह रेखा है जो आप देखते हैं।

text-decoration:none<a> पर इसका उपयोग करें, इसे हल करना चाहिए।

a { 
    text-decoration: none; 
} 

Answer 2

यह तो होना ही दिखाई देता है:

• समापन एंकर टैग है एक छवि
• तत्व
• और लंगर की दिखाई दे रहे पाठ के बाकी हिस्सों से अलग-अलग पंक्ति है और आपके पास एक ही पंक्ति

• पर कई छवियां हैं और क्षैतिज श्रृंखला

  में एंकर/छवि अंतिम आइटम नहीं है

  निम्न उदाहरण में, आप डैश तीसरे और पांचवें छवियों के बाद नहीं देख सकेंगे, लेकिन अन्य छवियों छवि/लिंक के अधिकार के लिए एक पानी का छींटा दिखाएगा:

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

मुझे यह कहने के लिए कोई जानकारी नहीं मिल रही है कि यह एकाधिक लाइनों में विभाजित तत्वों के संबंध में एक HTML नियम का उल्लंघन है। मैंने क्रोम, फ़ायरफ़ॉक्स और आईई 11 में एक ही समस्या को दोहराया।

मैं केवल अनुमान लगा सकता हूं कि छवि के बाद एक स्थान जोड़ा जा रहा है, क्योंकि समापन टैग एक अलग रेखा पर है। और यह ऊपर दिए गए उत्तरों से संबंधित है - अंतरिक्ष को स्वचालित रूप से एक रेखांकित के साथ स्टाइल किया जा रहा है। लेकिन मुझे नहीं पता कि छवि के बाद अंतरिक्ष क्यों जोड़ा जाता है लेकिन पाठ के बाद नहीं, या यह तब होता है जब छवियां एक ही पंक्ति पर होती हैं।

Answer 3

<a> एक इनलाइन तत्व है। यदि आप संलग्न तत्वों और </a> तत्व के बीच स्थान छोड़ते हैं, तो इसे अंडरस्कोर के साथ स्वचालित रूप से स्वरूपित किया जाएगा।