लाइन-ऊंचाई और इनलाइन तत्व: एक गहरा गोता

इनलाइन तत्वों में लाइन-ऊंचाई व्यवहार को समझना पेचीदा हो सकता है। गहन शोध के बावजूद, कुछ प्रमुख पहलू अस्पष्ट बने हुए हैं। यह मार्गदर्शिका निम्नलिखित प्रश्नों के उत्तर देने के लिए विषय की गहराई से पड़ताल करती है:

1. फ़ॉन्ट-आकार और मापी गई ऊंचाई के बीच असंगतता:

15px के फ़ॉन्ट-आकार वाला एक इनलाइन तत्व ब्राउज़र डेवलपर टूल में 18px की ऊंचाई प्रदर्शित करता है। ऐसा इसलिए होता है क्योंकि:

• इनलाइन बॉक्स की ऊंचाई: लाइन-ऊंचाई संपत्ति इनलाइन बॉक्स की ऊंचाई निर्धारित करती है, जो प्रत्येक तरफ सभी ग्लिफ़ और उनके आधे-अग्रणी को घेरती है। इस मामले में, बॉक्स की ऊंचाई 15px है। एक फ़ॉन्ट के भीतर।
• 2. पृष्ठभूमि का रंग लाइन-ऊंचाई से मेल नहीं खाता:

इनलाइन तत्व का पृष्ठभूमि रंग लाइन-ऊंचाई के साथ संरेखित नहीं होता है क्योंकि:

लाइन बॉक्स की ऊंचाई:

इनलाइन बॉक्स के अलावा लाइन बॉक्स भी होते हैं। एक लाइन बॉक्स की ऊंचाई लाइन-ऊंचाई से निर्धारित होती है और इसमें केवल वे इनलाइन बॉक्स शामिल होते हैं जो समान लाइन-ऊंचाई और ऊर्ध्वाधर संरेखण साझा करते हैं। इस उदाहरण में, लाइन बॉक्स की ऊंचाई भी 15px है। फ़ॉन्ट और आकार. यह मान फ़ॉन्ट विशेषताओं के आधार पर भिन्न हो सकता है और सीधे लाइन-ऊंचाई से संबंधित नहीं है।

• नोट:
सीएसएस विनिर्देश सामग्री क्षेत्र की गणना के लिए एल्गोरिदम को स्पष्ट रूप से परिभाषित नहीं करता है ऊंचाई, इसे उपयोगकर्ता एजेंटों की व्याख्या पर छोड़ दिया गया है।