उन्हें के रूप में परिभाषित

Question

मैं सीएसएस में em के लिए नया हो सकता है क्यों बर्ताव कर रही है नहीं है, लेकिन निम्न उदाहरण अजीब लगता है ...

डॉक्स का कहना है कि 1em font-size के बराबर है। मेरे उदाहरण में सबकुछ डिफ़ॉल्ट है। तो 8em टेक्स्ट की 8 लाइनों का आकार होना चाहिए, सही?

div { 
 
    background-color: red; 
 
    height: 8em; 
 
}

<div> 
 
    One<br/> 
 
    Two<br/> 
 
    Three<br/> 
 
    Four<br/> 
 
    Five<br/> 
 
    Six<br/> 
 
    Seven<br/> 
 
    Eight 
 
</div>

https://jsfiddle.net/q8vs7r4u/1/

8 लाइनें हैं, लेकिन 8 em उनमें से केवल 7 को शामिल किया गया। ऐसा लगता है कि 1em केवल एक पंक्ति के 7/8 को कवर कर रहा है, या कुछ ...

क्यों? मैं क्या गलत कर रहा हूं?

Answer 1

डिफ़ॉल्ट line-height1 नहीं है इसलिए प्रत्येक पंक्ति इसके अंदर के पाठ के फ़ॉन्ट आकार से लम्बा है।

Answer 2

यह काम नहीं कर रहा है क्योंकि line-height। मोज़िला डेवलपर नेटवर्क पर आप line-height के डिफ़ॉल्ट मान के बारे में निम्नलिखित जानकारी पा सकते हैं:

उपयोगकर्ता एजेंट पर निर्भर करता है। डेस्कटॉप ब्राउज़र (फ़ायरफ़ॉक्स समेत) तत्व के फ़ॉन्ट-परिवार के आधार पर लगभग 1.2 का डिफ़ॉल्ट मान उपयोग करते हैं।
https://developer.mozilla.org/en/docs/Web/CSS/line-height

निम्नलिखित कोड पर, line-height1em पर रीसेट किया जाएगा और पूरे पाठ div फिट बैठता है:

div { 
 
    background-color:red; 
 
    height:8em; 
 
    line-height:1em; 
 
}

<div> 
 
    One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight 
 
</div>

आधिकारिक W3C विनिर्देश से:

उपयोगकर्ता एजेंटों को उपयोग किए गए मान को तत्व के फ़ॉन्ट के आधार पर "उचित" मान पर सेट करने के लिए कहता है। मूल्य के समान अर्थ है। हम 1.0 से 1.2 के बीच 'सामान्य' के लिए उपयोग किए गए मान की अनुशंसा करते हैं। गणना मूल्य 'सामान्य' है।
https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

लेकिन हर उपयोगकर्ता एजेंट (ब्राउज़र) line-height ही की ऊंचाई को परिभाषित करता है 1.0 और 1.2 के बीच की सिफारिश की मूल्य पर!

Answer 3

अपेक्षित परिणाम देखने के लिए 1em के line-height निर्दिष्ट करें:

div { 
    background-color: red; 
    height: 8em; 
    line-height: 1em; 
} 

Answer 4

एक line box की ऊंचाई font-size द्वारा निर्धारित नहीं है। या कम से कम, सीधे नहीं।

आप स्पेस में detailed rules देख सकते हैं।एक लाइन बॉक्स केवल शामिल जब एक ही line-height और vertical-align के साथ गैर प्रतिस्थापित इनलाइन बक्से, उन नियमों का कहना है कि लाइन बॉक्स की ऊंचाई इनलाइन बक्से के line-height द्वारा दी जाएगी।

यह आपके मामले के लिए लागू होता है, क्योंकि पाठ सीधे निहित अंदर एक ब्लॉक कंटेनर तत्व एक anonymous inline box में लपेटा जाता है।

आप किसी भी स्पष्ट मूल्य के लिए line-height निर्धारित नहीं करते हैं, लाइन बॉक्स की ऊंचाई line-height का प्रारंभिक मूल्य, normal है, जो इस तरह बर्ताव करता है के द्वारा दिया जाएगा:

उपयोगकर्ता एजेंट स्थापित करने के लिए कहता है तत्व के फ़ॉन्ट पर "उचित" मान पर उपयोग किया गया मान। मान का अर्थ <number> जैसा ही है। हम 1.0 से 1.2 के बीच 'सामान्य' के लिए उपयोग किए गए मान की अनुशंसा करते हैं। computed value 'सामान्य' है।

उदाहरण के लिए, ब्राउज़र चुनता है 1.15, 1em लाइन की ऊंचाई का 1/1.15 = 0.8696 कवर किया जाएगा। यह आपके द्वारा मनाए गए 7/8 = 0.8750 के बहुत करीब है।

नोट गुमनाम इनलाइन बक्से line-height ब्लॉक माता-पिता की तरह बॉक्स के दाय गुण प्राप्त करती हैं। फिर, आप ब्लॉक की line-height को स्पष्ट लंबाई तक सेट कर सकते हैं, और उस लंबाई की ऊंचाई लाइनों की संख्या से गुणा हो सकती है।

div { 
 
    line-height: 1.2em; 
 
    height: calc(1.2em * 8); 
 
    background: red; 
 
}

<div>One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight</div>

Answer 5

1em font-size

क्षैतिज के बराबर है। लंबवत नहीं है। एम 'एम' की चौड़ाई है। वर्टिकल स्पेसिंग के लिए इसका उपयोग करने के लिए यह टाइपोग्राफ़िक रूप से मान्य नहीं है।