2012-08-09 14 views
5

एक ब्लॉक तत्व ऊंचाई सामग्री फ़ॉन्ट आकार से प्रभावित है?फ़ॉन्ट का आकार ब्लॉक तत्व की ऊंचाई को प्रभावित करता है?

यह सिर्फ, तुम मुझे क्या मतलब है दिखाने के लिए इस उदाहरण fiddle

को देखो आप div के अंदर वर्ग .p का फ़ॉन्ट आकार में वृद्धि तो सबसे अच्छा है, div की ऊंचाई भी बढ़ जाती है, ऐसा क्यों है?

+0

आपको लचीला div की आवश्यकता है? – Lukas

+0

मेरा मानना ​​है कि http://jsfiddle.net/DtcFn/6/ उसमें एक बेहतर पहेली है, मुझे लगता है कि यह उन परिवर्तनों को दिखाता है जिनके बारे में आप बात कर रहे हैं। यह उम्मीद है कि लोगों के लिए यह और अधिक स्पष्ट होगा कि आप किस बदलाव और किस आकार के बारे में बात कर रहे हैं। – Chris

+0

yes.it प्रश्न को अधिक सहजता से वर्णन करता है। धन्यवाद – SKing7

उत्तर

1

ऐसा इसलिए है क्योंकि आपने स्टाइलशीट्स में height -प्रोपर्टी परिभाषित नहीं किया था। डिफ़ॉल्ट height: auto है।

+0

div के लिए ऊंचाई निर्दिष्ट करना टेक्स्ट के ऊपर की जगह को नहीं रोकता है, यह केवल उस ऊंचाई पर टेक्स्ट को क्लिप करेगा। – Guffa

+1

@ गुफा: उपर्युक्त स्थान को कुछ भी करना है? सवाल यह था कि ऊंचाई क्यों बदल रही है और कारण यह है कि ऊंचाई परिभाषित नहीं की गई थी ... क्या ऊंचाई ऊपर उठाई गई है निश्चित रूप से एक पूरी तरह से अलग मुद्दा है? – Chris

+0

@ गुफा: आह, मैं देखता हूं कि आपका क्या मतलब है, यदि आप 'पी' वर्ग पर फ़ॉन्ट आकार को 33px से ऊपर बढ़ाते हैं तो div बड़ा हो जाएगा लेकिन फ़ॉन्ट नहीं बदलेगा। मैंने उस मूल्य को बदलने की कोशिश की थी, लेकिन इतना अधिक नहीं था, इसलिए एकमात्र फ़ॉन्ट आकार जो मैंने पाया कि एक फर्क पड़ता था वह पाठ को बदलता था। – Chris

1

क्योंकि आपके पास div पर कोई सेट ऊंचाई नहीं है।

इसका मतलब है कि div इस सामग्री में p तत्व में अपनी सामग्री को फिट करने के लिए विस्तारित होगा।

यदि आप ऊंचाई निर्दिष्ट नहीं करते हैं तो यह height:auto पर डिफ़ॉल्ट होगा।

+0

लेकिन क्लास नाम के div के फ़ॉन्ट आकार द्वारा कोई तत्व नहीं है, पी – SKing7

+0

div के लिए ऊंचाई निर्दिष्ट करने से टेक्स्ट के ऊपर की जगह को रोका नहीं जाता है, यह केवल उस ऊंचाई पर टेक्स्ट को क्लिप करेगा। – Guffa

0

आप, div ऊंचाई सेट को देखने के http://jsfiddle.net/VpeW8/

+0

div के लिए ऊंचाई निर्दिष्ट करने से पाठ के ऊपर की जगह को रोका नहीं जाता है, यह केवल उस ऊंचाई पर टेक्स्ट को क्लिप करेगा। – Guffa

7

ऐसा इसलिए है क्योंकि div का फ़ॉन्ट आकार का फैसला करता है, जहां पाठ के लिए बेस लाइन है, और अवधि कि बेस लाइन पर रखा गया है है की जरूरत है।

div के फ़ॉन्ट आकार को बढ़ाने से आधार रेखा के ऊपर और नीचे की दूरी बढ़ जाती है। यह उस अवधि की सामग्री है जो तत्व का आकार देता है, इसलिए यह आधार रेखा से केवल दूरी है जो आकार को प्रभावित करती है, आधार रेखा से नीचे की दूरी नहीं, इसलिए आपको पाठ को धक्का दिया जाएगा, लेकिन कोई संबंधित नहीं है पाठ के नीचे जगह।

+0

ओह.धन्यवाद। अगर इसके बारे में कुछ दस्तावेज हैं। उदाहरण के लिए डब्ल्यू 3 दस्तावेज़ – SKing7

+0

में फ़ॉन्ट आकार किस आधार पर आधार रेखा तय करता है? – SKing7

+0

@ स्किंग 7: फ़ॉन्ट का आकार टेक्स्ट ऊंचाई सेट करता है, लेकिन रेखा की ऊंचाई इसे सीमित करती है।फ़ॉन्ट आकार और रेखा की ऊंचाई उन्हें कैसे प्रभावित करती है, यह देखने के लिए अवधि के बाहर कुछ वर्ण रखें: http://jsfiddle.net/Guffa/DtcFn/7/ – Guffa

0

क्योंकि लाइन ऊंचाई के अनुसार लाइन ऊंचाई अनुमानित है। फ़ॉन्ट आकार के जवाब में विस्तार से div को रोकने के लिए स्पष्ट रूप से सीएसएस में लाइन-ऊंचाई गुण सेट करें।

संबंधित मुद्दे