एचटीएमएल रूपों में लेबल तत्वों की लाइन-ऊंचाई समायोजित करना

Question

मेरे पास <label> तत्व लपेटने वाला एक फॉर्म है, लेकिन <label> की दो पंक्तियों के बीच की जगह बहुत बड़ी है और मैं लाइन की ऊंचाई समायोजित नहीं कर सकता <label>।

यहां एक ही सीएसएस के साथ <label> और <p> का उदाहरण दिया गया है। जैसा कि आप देख सकते हैं, <p> सही ढंग से समायोजित करता है, जबकि <label> अपरिवर्तित बनी हुई है।

http://jsfiddle.net/QYzPa/

कोड:

form label, 
 
form p 
 
{  
 
    font-weight:bold; 
 
    line-height:.7em; 
 
}

<form style="width:200px;"> 
 
    <fieldset> 
 
     <label for="textarea">In ten or fewer words, explain American history</label> 
 
     <p>In ten or fewer words, explain American history</p> 
 
     <textarea name="textarea" rows="5" ></textarea> 
 
    </fieldset> 
 
</form>

Answer 1

सभी HTML टैग लेबल पर display: block; सेट यह काम करेंगे श्रेणियों में वर्गीकृत हैं उनकी प्रकृति का वर्णन करें। यह वर्गीकरण अर्थशास्त्र, व्यवहार, बातचीत और कई अन्य पहलुओं से संबंधित हो सकता है।

p और label टैग दोनों "प्रवाह सामग्री" टैग श्रेणी में वर्गीकृत हैं। लेकिन इसके बीच एक मामूली अंतर है: label टैग को "phrasing content" नामक श्रेणी में भी वर्गीकृत किया गया है।

अभ्यास में इसका क्या अर्थ है? ब्राउज़र डिफ़ॉल्ट प्रतिपादन निर्दिष्ट टैग वर्गीकरण का पालन करेगा और p टैग को ब्लॉक तत्व के रूप में मानेंगे, जबकि label टैग डिफ़ॉल्ट रूप से, इन-लाइन तत्व के रूप में माना जाएगा। आप डिफ़ॉल्ट सीएसएस नियम को ओवरराइट करके इसे संशोधित कर सकते हैं: बस ब्राउज़र को बताएं कि आप अपने label को ब्लॉक तत्व की तरह प्रस्तुत करने के लिए चाहते हैं। (: इनलाइन प्रदर्शन) height जैसे गुण नहीं हो सकता, line-height, margin-top, margin-bottom (वे नजरअंदाज कर दिया जाएगा)

label { 
    display: block; 
} 

आपको लगता है कि क्योंकि तत्वों है कि कर रहे हैं इनलाइन करने की ज़रूरत है।

आप एक इनलाइन तत्व चाहते हैं एक ऊंचाई संपत्ति है, लेकिन अभी भी यह इनलाइन व्यवहार, आप इसे घोषणा कर सकते हैं के रूप में (कारण एक लाइन ब्रेक के बिना) के साथ रख:

label{ 
display:inline-block; 
} 

यह हमेशा अच्छा है एक लेने के लिए एचटीएमएल के दस्तावेज पर पढ़ें। Here is a nice graph showing the categories, यह आपको बहुत समय बचा सकता है, विशेष रूप से इन छोटे quirks से निपटने के दौरान।

Answer 2

पूरी तरह सुनिश्चित नहीं हैं कि क्यों, लेकिन अगर आप

Answer 3

मुझे लगता है कि क्या मार्शियो कहने की कोशिश कर रहा है कि inline तत्वों (जैसे span या label ओं), जो पाठ में एक के बाद एक निवास कर सकते हैं, आप गुण है कि पूरे अनुच्छेद के लिए लागू निर्दिष्ट नहीं कर सकते है।

स्पष्ट एक text-align है: पैराग्राफ को संरेखण निर्दिष्ट करना चाहिए और व्यक्तिगत span एस नहीं होना चाहिए। तो line-height और ऐसे के रूप में।

inline तत्वों के विपरीत block तत्वों div या p की तरह है जो एक पृष्ठ पर एक वर्ग पर कब्जा है और एक उच्च ब्लॉक स्तर पर एक दूसरे के बीच से बाहर रखा जाता है। यह व्यवहार सीएसएस विशेषता display के साथ नियंत्रित है जिसके साथ divspan और इसके विपरीत व्यवहार कर सकता है।