लाइन ऊंचाई के लिए ईएम

Question

मैं अपनी नई वेबसाइट को पिक्सेल से ईएमएस में परिवर्तित करना चाहता हूं। मेरा सवाल है, क्या मुझे अपनी टेक्स्ट लाइन-ऊंचाई संपत्ति में ईएमएस भी लागू करना चाहिए?

Answer 1

यह मानते हुए कि "ईएमएस को बदलने" font-size के लिए em इकाई का उपयोग कर, तो आप एक तरह से यह भी कहा कि फ़ॉन्ट आकार के लिए adapts में line-height स्थापित करना चाहिए मतलब है। दो गुण निकट से संबंधित हैं, और यदि आप उनमें से एक को em और अन्य (उदा।) px या pt में सेट करते हैं, तो फ़ॉन्ट आकार बदलने पर पृष्ठ टूट जाएगा। तो यह अनिवार्य रूप से जुड़े गुणों के लिए अनिवार्य रूप से अलग-अलग इकाइयों का उपयोग करने के लिए "ईएमएस का उपयोग" के विचार के खिलाफ काम करेगा।

उदाहरण के लिए, यदि आप font-size: 1.5em और line-height: 18px सेट करते हैं, तो चीजें तत्व के माता-पिता के फ़ॉन्ट आकार पर निर्भर करती हैं और यदि यह आकार अपेक्षाकृत छोटा या बहुत बड़ा होता है तो बहुत गलत हो सकता है।

चाहे आप em इकाई का उपयोग करें या शुद्ध संख्या एक अलग समस्या है। line-height: 1.2 में, केवल एक संख्या का उपयोग करना, line-height: 1.2em में em इकाई का उपयोग करने के बराबर है। लेकिन इसमें अंतर है कि line-height विरासत में मिला है, यह शुद्ध संख्या है जो विरासत प्राप्त होती है, गणना मूल्य नहीं।

उदाहरण के लिए, यदि किसी आंतरिक तत्व के माता-पिता के फ़ॉन्ट आकार में दोगुना है, तो विरासत मान 1.2 का अर्थ है कि 1.2 गुना अपने फ़ॉन्ट आकार का उपयोग किया जाता है, जो ठीक है। लेकिन अगर माता-पिता के पास line-height: 1.2em था, तो बच्चे को उस मूल्य का वारिस मिलेगा जो माता-पिता के फ़ॉन्ट आकार के 1.2 गुणा - जो कि अपने फ़ॉन्ट आकार से बहुत छोटा है।

अधिक स्पष्टीकरण अंत उदाहरण के लिए

देख line-height @ Mozilla Developer Network

Answer 2

आप, em की कोशिश कर सकते हैं line-height:1.3 !important;

Answer 3

line-heightpx में सेट किया जा सकता है, हर इकाई फिट होगा।

line-height यदि आप कोई कारक/गुणक का उपयोग करते हैं, जिसका मतलब कोई इकाई नहीं है, लेकिन केवल एक संख्या है जो आपके फ़ॉन्ट आकार को गुणा कर रहा है तो सबसे अच्छा और भविष्य का सबूत काम करता है।

.foo { 
    font-size: 1.3em; /* based that 1em == 10px */ 
    line-height: 1.3; /* 16.9px line-height */ 
} 

तो, हाँ, आप कर सकते हैं, आपको जवाब देने के लिए: नहीं, आपको नहीं करना चाहिए।

भविष्य के सबूत होने के लिए कारक आधारित लाइन-ऊंचाई के लिए जाएं।

Answer 4

यह line-height के लिए unitless नंबर का उपयोग करने के लिए (विरासत मुद्दों को रोकने के लिए) की सिफारिश की है। गणना की गई लाइन-ऊंचाई इकाई के फ़ॉन्ट आकार द्वारा गुणा किए गए यूनिटलेस मान का उत्पाद होगा।

यह इतना (मोज़िला सीएसएस डॉक्स से लिया उदाहरण) जैसे, font सीएसएस शॉर्टकट का उपयोग करने के लिए अधिक सुविधाजनक हो सकता है:

div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } 

क्यों unitless मूल्य बेहतर यहाँ दिया जाता है का एक अच्छा उदाहरण: Prefer unitless numbers for line-height values ।