टेक्स्ट की लाइनों के बीच अंतर को हटाएं

Question

जब आप किसी तत्व की रेखा-ऊंचाई बढ़ाते हैं, तो आप टेक्स्ट की प्रत्येक पंक्ति के बीच अंतराल प्राप्त करना शुरू करते हैं। अधिकांश समय यह ठीक है, क्योंकि आप विशिष्ट अंतर नहीं देखते हैं।

लेकिन यह समस्याग्रस्त है जब आपके पास एक संकीर्ण कॉलम है, जो एक लिंक के साथ कई लाइनों पर चलता है। यदि आप अपने माउस को लिंक पर ले जाते हैं, तो लाइनों के बीच एक छोटा सा अंतर होता है, जो लिंक होवर प्रभाव को चालू और बंद करता है।

एक डिजाइन/उपयोगिता परिप्रेक्ष्य से, मुझे लगता है कि यह एक खराब उपयोगकर्ता अनुभव के लिए बनाता है (कोई भी यादृच्छिक चमकती पसंद नहीं करता है)। इस के साथ यह प्रयास करें:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est. Nunc aliquam, eros a aliquam consequat, ante diam rutrum risus, et dignissim ligula turpis et ante. Maecenas leo neque, euismod in, aliquam et, molestie ac, ligula. Integer venenatis. Pellentesque enim. Maecenas aliquet, tortor at molestie sodales, urna velit pulvinar lorem, ac malesuada nibh turpis eu tortor.

मैं कुछ मामलों में हो रहा से रोकने के लिए लिंक करने के लिए कुछ गद्दी जोड़ सकते हैं, लेकिन जब पाठ बड़ा है यह काम नहीं करता; मुझे और पैडिंग चाहिए। किसी के पास समाधान के लिए विचार हैं?

Answer 1

प्रदर्शन सेट करके अपनी चमकती समस्या को ठीक करने का प्रयास करें: उस संकीर्ण कॉलम में अपने <a> तत्व के लिए ब्लॉक करें।

Answer 2

आप प्रत्येक पंक्ति के प्रारंभ और समाप्ति बिंदु जानते हैं कि आप प्रत्येक पंक्ति दौर अंतराल डाल सकता है, और गद्दी स्थापित करने के लिए

#wrap {font-size:14px; line-height:16px;} 
a span{display:-moz-inline-block; display:inline-block;line-height:14px;padding:1px 0;} 
a:hover {background:red;} 

<div id="wrap"> 
dsvlaksvh; asvj asdfh;dhldv hd d dl h dfhd d dfh; daljfda k;d <a href="#" > 
<span>hdv </span><span>dvh ldvhldf dhk </span><span>;dhkdf hdl hdfk 
</span><span>dfhkldf h vkhg j</span></a> glj gj f gjl fjl fj f 
    </div> 

Answer 3

उपयोग रिश्तेदार इकाइयों एक इनलाइन ब्लॉक में बदल।

प्रश्न में उदाहरण लिंक के लिए फायरबग/ड्रैगनफ्लाई का उपयोग करके padding: 0.2ex 0; background: red; जोड़ना मेरे लिए ठीक काम करता है, जो भी फ़ॉन्ट आकार (सीएसएस के माध्यम से सेट या ज़ूम इन करना)।

फ़ायरफ़ॉक्स में फ़ॉन्ट आकार बदलने के साथ एकमात्र समस्या यह है कि पृष्ठभूमि पिछली रेखा को ओवरलैप करना शुरू कर देती है; लेकिन यह line-height मुद्दा है।