इनलाइन तत्व और रेखा-ऊंचाई

Question

मैं line-heightinline तत्वों में उलझन में हूं। मैं खोज की गई है:

• http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
• http://www.w3.org/wiki/CSS/Properties/line-height
• https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

लेकिन मुझे यकीन है कि अगर मुझे समझ में नहीं हूँ। मुझे पता है कि अगर मैं डिस्प्ले के साथ ब्लॉक में कनवर्ट करता हूं तो मैं ऊंचाई को सटीक बना सकता हूं: इनलाइन-ब्लॉक। लेकिन मैं समझने की कोशिश करता हूं कि लाइन-ऊंचाई इनलाइन तत्व कैसे काम करते हैं। यहाँ प्रश्न हैं:

• मैं एक पाठ font-size: 15px है लेकिन अगर मैं ब्राउज़र के डेवलपर उपकरण देखते हैं, यह 18px बनाता है। क्यूं कर? font-size सिर्फ अपरिवर्तनीय है? या यह अप और डाउन को मापता नहीं है?

• inline तत्व का पृष्ठभूमि रंग line-height से समान height क्यों नहीं है? line-heightinline तत्वों में रेखा बॉक्स की जगह मापती है, जो ऊपर और नीचे की रेखा का स्थान है, लेकिन inline तत्व नहीं है। क्या वह स्पष्टीकरण है?

Here an example to play with.

सीएसएस:

#block-element { 
 
    font-family: 'verdana', sans-serif; 
 
    font-size: 15px; 
 
    line-height: 15px; 
 
    text-decoration: none; 
 
    color: black; 
 
    margin: 0; 
 
    background-color: grey; 
 
} 
 
#inline-element { 
 
    -webkit-box-sizing: border-box; 
 
    font-family: 'verdana', sans-serif; 
 
    font-size: 15px; 
 
    line-height: 15px; 
 
    text-decoration: none; 
 
    color: black; 
 
    margin: 0; 
 
    background-color: green; 
 
}

<div id="block-element"> 
 
    <a id="inline-element" href="#"> 
 
    inline element font-size:15px but height:18px real 
 
    </a> 
 
</div>

Answer 1

इसका कारण यह है इनलाइन स्वरूपण मॉडल में वहाँ अलग-अलग ऊंचाइयों हैं भ्रामक हो सकता है। एक इनलाइन बॉक्स

की

ऊंचाई

display: inline साथ एक तत्व उत्पन्न करता है एक inline box:

एक इनलाइन बॉक्स एक है कि दोनों इनलाइन स्तर और जिनकी सामग्री अपने युक्त में भाग लेते हैं इनलाइन प्रारूपण संदर्भ। inline के मान के साथ गैर-प्रतिस्थापित तत्व इनलाइन बॉक्स उत्पन्न करता है।

और line-height निर्धारित करता है height of that box:

इनलाइन बॉक्स की ऊंचाई सभी ग्लिफ़ और encloses उनके आधा अग्रणी प्रत्येक पक्ष पर है और इस तरह वास्तव में 'line-height'

है

इसलिए, आपका बॉक्स वास्तव में 15px लंबा है।

एक लाइन बॉक्स की ऊँचाई

वहाँ भी line boxes हैं:

एक इनलाइन स्वरूपण संदर्भ में, बक्से, क्षैतिज बाहर रखी हैं एक के बाद एक , एक के शीर्ष पर शुरुआत ब्लॉक युक्त क्षैतिज मार्जिन, सीमाएं, और पैडिंग इन बक्से के बीच सम्मानित हैं। बक्से को विभिन्न तरीकों से लंबवत रूप से गठबंधन किया जा सकता है: उनके बोतलों या शीर्ष को गठबंधन किया जा सकता है, या उनके भीतर पाठ की बेसलाइन गठबंधन किया जा सकता है। आयताकार क्षेत्र जिसमें एक बॉक्स है, को लाइन बॉक्स कहा जाता है।

लाइन बॉक्स की ऊंचाई अनुभाग line height calculations पर दिए गए नियमों द्वारा निर्धारित की जाती है।

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

तो आपके मामले में, यह 15px भी है। एक इनलाइन बॉक्स

की सामग्री क्षेत्र के

ऊंचाई हालांकि, अपने ब्राउज़र के डेवलपर उपकरण 18px कहा। ऐसा इसलिए है क्योंकि 18px सामग्री क्षेत्र की ऊंचाई हैं। यह भी सामग्री क्षेत्र (पैडिंग के साथ) है जो हरी पृष्ठभूमि द्वारा चित्रित किया गया है।

सामग्री क्षेत्र की ऊंचाई फॉन्ट पर आधारित होना चाहिए, लेकिन इस विनिर्देश कैसे निर्दिष्ट नहीं करता:

नोट उन 18px क्योंकि CSS 2.1 doesn't specify an algorithm भिन्न हो सकता है। एक UA, उदाहरण के लिए, एमएम बॉक्स या अधिकतम आरोही और फ़ॉन्ट के अवरोही का उपयोग कर सकता है। (उत्तरार्द्ध यह सुनिश्चित करेगी कि ऊपर या उन्हें-बॉक्स के नीचे भागों के साथ ग्लिफ़ अभी भी अलग फोंट के लिए सामग्री क्षेत्र के भीतर गिर जाते हैं, लेकिन करने के लिए सुराग अलग ढंग से आकार के बक्से, पूर्व लेखकों यह सुनिश्चित करना होगा करने के लिए नियंत्रित कर सकते हैं पृष्ठभूमि स्टाइल रिश्तेदार ' line-height ', लेकिन ग्लिफ़ के लिए अपनी सामग्री क्षेत्र के बाहर चित्रकला ओर जाता है।)

एक यूए पहला सुझाव को लागू करता है, तो सामग्री ऊंचाई font-size है, जो उन्हें बॉक्स निर्धारित करता है के द्वारा दी जाएगी। यह आपको अपेक्षित होगा, हरे रंग के बॉक्स 15px लंबा होने के साथ।

हालांकि, अधिकांश UAs ऐसा नहीं करते हैं। इसका मतलब है कि, शायद, ऊंचाई font-family और font-size में सबसे ऊंची ग्लिफ की ऊंचाई होगी।

लेकिन font-size15px का मान का मतलब यह नहीं है कि सबसे लंबा ग्लिफ़ 15px लंबा भी होगा। यह फ़ॉन्ट पर निर्भर करता है।यह कुछ हद तक normal, line-height का प्रारंभिक मूल्य है, जो के रूप में

बताता उपयोगकर्ता एजेंटों तत्व के फ़ॉन्ट पर आधारित एक "उचित" मूल्य के लिए इस्तेमाल किया मान सेट करने परिभाषित किया गया है के अनुरूप है [...] । हम 'सामान्य' 1.0 से 1.2 के बीच उपयोग किए गए मान की अनुशंसा करते हैं।

इसका मतलब है कि, अगर आप font-size: 15px, का उपयोग एक "उचित" line-height15px और 18px के बीच होगा। "वर्दान" फ़ॉन्ट में, फ़ायरफ़ॉक्स सबसे अच्छा लगता है 18px; "sans-serif" में, यह 17px का उपयोग करता है।

Answer 2

#block-element { 
 
\t font-family: 'verdana', sans-serif; 
 
\t font-size:15px; line-height:15px; 
 
\t text-decoration: none; color:black; 
 
\t margin:0; 
 
\t background-color:grey; 
 
} 
 

 

 
#inline-element { 
 
\t -webkit-box-sizing: border-box; 
 
\t font-family: 'verdana', sans-serif; 
 
\t font-size:15px; line-height:55px; 
 
\t text-decoration: none; color:black; 
 
\t margin:0; 
 
\t background-color:green; 
 
    
 
    float:left; 
 
}

<div id="block-element"> 
 
\t <a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a> 
 
</div>

** और line-height ब्लॉक तत्व पर काम में आप लागू line-height 200px अपने तत्व ऊंचाई होगा 200px और 200px ऊंचाई **

इनलाइन पर अपने भीतर तत्व मध्य तत्व ऊंचाई और पैडिंग को ऊपर और नीचे नहीं पढ़ सकता है, हमें इन गुणों को पढ़ने की आवश्यकता है, हमें किसी भी लेआउट गुणों जैसे फ्लोट, डिस्प्ले: इनलाइन-ब्लॉक या ब्लॉक

केवल ब्लॉक तत्वों को पढ़ा जाता है ई-ऊंचाई और पैडिंग गुण यदि आप फ्लोट जोड़ते हैं: बाएं या डिस्प्ले: ब्लॉक सीएसएस प्रॉपर्टी जोड़ें लाइन-ऊंचाई और पैडिंग

अपने कोड में केवल उस हैलेआउट संपत्ति को जोड़कर आप इनलाइन तत्व ब्लॉक के रूप में काम कर रहे हैं तत्व