की ऊंचाई की गणना करने के मैं निम्नलिखित सीएसएस के साथ एक span तत्व है:कैसे एक इनलाइन तत्व
span.test {
font-size: 20px;
line-height: 1;
}
क्यों अवधि की गणना की ऊंचाई 22px किया जा रहा है? ये 2 अतिरिक्त पिक्सल कहां से आते हैं?
यह inline-block का उपयोग किए बिना यह लंबा 20px बनाने के लिए संभव है? http://jsbin.com/tigevecemoco/1/edit
10.6.1 इनलाइन, गैर प्रतिस्थापित तत्वों
'ऊंचाई' संपत्ति लागू नहीं होता। सामग्री क्षेत्र की ऊंचाई फ़ॉन्ट पर आधारित होना चाहिए, लेकिन यह विनिर्देश निर्दिष्ट नहीं करता है कि कैसे।
यह ऊंचाई होता है, के रूप में एक गैर प्रतिस्थापित इनलाइन तत्व की, line-height करने का विरोध किया और कुछ पर बहुत कम प्रभाव इतना ब्राउज़रों सुंदर रिपोर्ट करने के लिए वे यहां की तरह जो कुछ भी संख्या के लिए स्वतंत्र हैं है।
हालांकि, एक छोटी रिवर्स इंजीनियरिंग निर्देशक हो सकती है।
यदि हम टाइम्स न्यू रोमन के लिए फ़ॉन्ट मीट्रिक देखते हैं, तो हम 2048 के ईएम आकार, 1825 के विनएसेंट और 443 के विनडेसेंट देखते हैं। ईएम आकार से विभाजित, चढ़ाई और वंश, फ़ॉन्ट आकार से गुणा करें (20 पीएक्स) और पूर्णांक के दौर और हमें 22 पीएक्स मिलता है।
एरियल को एक और फ़ॉन्ट के रूप में लेते हुए, हमारे पास 2048 का ईएम आकार, 1854 का विनएसेंट और 434 का विनडेसेंट है। गणना फिर से करें और हम फिर से 22px प्राप्त करें।
एक अलग फ़ॉन्ट के बारे में क्या? ताहोमा में 2048 का ईएम आकार, 2049 का विनएसेंट और 423 का विनडेसेंट है। गणना फिर से करें और इस बार हमें 24px मिलेंगे। और हे पस्टो, यदि आप अपने जेएसबीन को ताहोमा फ़ॉन्ट के साथ आज़माते हैं, तो फ़ायरफ़ॉक्स वास्तव में 24 पीएक्स की ऊंचाई दिखाता है।
ऊपर दिए गए फ़ॉन्ट मेट्रिक्स को फ़ॉन्ट्स को Type Light 3.2 में लोड करने से प्राप्त किया गया था।
निर्णायक नहीं है, लेकिन यह एक उचित सुझाव है कि यह सब कैसे काम करता है।
क्या इनलाइन-ब्लॉक का उपयोग किए बिना इसे लंबा 20px बनाना संभव है?
उपर्युक्त मानना सही है, तो आप कस्टम फ़ॉन्ट का उपयोग करके इसे प्राप्त करने में सक्षम होना चाहिए और उस फ़ॉन्ट के फ़ॉन्ट मीट्रिक को सूट करने के लिए संशोधित करना चाहिए। मैं हालांकि ऐसा करने के नॉक-ऑन प्रभावों की भविष्यवाणी करना नहीं चाहूंगा।
यह भी देखें [सेक्शन 10.8.1] (http://www.w3.org/TR/CSS21/visudet.html#line-height), जो चर्चा करता है कि लाइन बॉक्स की ऊंचाई (या हो सकती है) के साथ गणना की जाती है लाइन-ऊंचाई के संबंध में, हालांकि ध्यान दें कि यह खंड 10.6.1 का संदर्भ देता है। – BoltClock
मैं क्यों यह लागू किया जाता है का उत्तर नहीं मिल सकता है:
यहाँ सरल jsbin मैं परीक्षण के लिए इस्तेमाल किया है। मैं आपके अनुरोध के जवाब के रूप में, एक ही सवाल के साथ कई मंचों मिला ...
लेकिन:
यह इनलाइन-ब्लॉक का उपयोग किए बिना यह लंबा 20px बनाने के लिए संभव है?
मैं केवल तत्व को फ़्लोट करके ऐसा करने में कामयाब रहा। ऐसा लगता है कि जो कुछ भी था वह इसे खराब कर रहा था ... फिर, line-height को विशिष्ट 20px पर सेट करने से यह काम करता है।
span.test {
font-size: 20px;
line-height: 20px;
float: left;
}<span class="test">A</span>संपादित
वास्तव में, float काम करता है जोड़ने क्योंकि यह बनाता है inline तत्वों block तत्वों की तरह व्यवहार करते हैं।
देखें: https://developer.mozilla.org/en-US/docs/Web/CSS/float
'लाइन hieght: 1' माता-पिता से विरासत में मिला है। अपनी लाइन ऊंचाई की कोशिश करो।
यह मेरे लिए काम नहीं कर रहा है। यदि मैं 'लाइन-ऊंचाई' सेट करता हूं: 20px' यह अभी भी '22px' लंबा है। क्या आप मुझे अपना जेएसबीएन लिंक कर सकते हैं? – tyrion
हालांकि ये लिंक प्रश्न का उत्तर दे सकते हैं, यहां उत्तर के आवश्यक हिस्सों को शामिल करना बेहतर है और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक किए गए पृष्ठ में परिवर्तन होने पर लिंक-केवल उत्तर अमान्य हो सकते हैं। – BoltClock
मैंने आपकी समस्या को हल करने के लिए जेएस बिन http://jsbin.com/siqabekoloja/1/edit का उपयोग किया। मैं इसे आईई, क्रोम और फ़ायरफ़ॉक्स में सुसंगत बनाने में सक्षम था। मेरा मानना है कि समस्या यह है कि आपको इनलाइन तत्व को अवरुद्ध करने के लिए तत्व की आवश्यकता नहीं है।
उम्मीद है कि इससे मदद मिलती है। यदि आप चाहते हैं कि वे एक दूसरे के बगल में हों तो बस उन्हें बाएं या दाएं फ़्लोट करें।
लाइन ऊंचाई आपके कोड में कुछ भी करता है? –
ऐसा लगता है ... – tyrion
'रेखा-ऊंचाई: 1' 'रेखा-ऊंचाई: 100%' की तरह कार्य करता है, दोनों पंक्ति-ऊंचाई को 20px (फ़ॉन्ट-आकार) पर सेट करते हैं। मैं नहीं बता सकता कि अतिरिक्त पिक्सल कहां से आते हैं, लेकिन मैं उन्हें देखता हूं। क्रोम में परीक्षण – GolezTrol