चौड़ाई और ऊंचाई: तत्व का आकार निर्धारित करें। HTML पृष्ठ तत्वों को आकार देने के लिए सीएसएस की चौड़ाई और ऊंचाई के मापदंडों को ब्लॉक की चौड़ाई से अधिक होना
विवरण
ब्लॉक या बदली तत्वों की ऊंचाई निर्धारित करता है (उदाहरण के लिए, टैग )। ऊंचाई में तत्व, पैडिंग और मार्जिन के आसपास की सीमाओं की मोटाई शामिल नहीं है।
यदि ब्लॉक की सामग्री निर्दिष्ट ऊंचाई से अधिक है, तो तत्व की ऊंचाई अपरिवर्तित रहेगी और सामग्री उसके ऊपर प्रदर्शित की जाएगी। जब एचटीएमएल कोड में तत्व अनुक्रमिक होते हैं, तो यह सुविधा तत्वों की सामग्री को ओवरलैप कर सकती है। ऐसा होने से रोकने के लिए, तत्व की शैली में अतिप्रवाह जोड़ें: ऑटो।
वाक्य - विन्यास
ऊंचाई: मूल्य | ब्याज | ऑटो | इनहेरिट
मूल्य
CSS में स्वीकार की गई कोई भी लंबाई इकाइयाँ मानों के रूप में स्वीकार की जाती हैं - उदाहरण के लिए, पिक्सेल (px), इंच (में), अंक (pt), आदि। प्रतिशत अंकन का उपयोग करते समय, तत्व की ऊंचाई की गणना मूल तत्व की ऊंचाई के आधार पर की जाती है। यदि माता-पिता को स्पष्ट रूप से निर्दिष्ट नहीं किया जाता है, तो ब्राउज़र विंडो का उपयोग उसके माता-पिता के रूप में किया जाता है। ऑटो तत्व की सामग्री के आधार पर ऊंचाई निर्धारित करता है
एचटीएमएल 5 CSS2.1 IE सीआर ओप सा एफएक्स
इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 1।
चित्र: 1. ऊंचाई संपत्ति को लागू करना
ऑब्जेक्ट मॉडल
document.getElementById ("elementID") .style.height
ब्राउज़र्स
इंटरनेट एक्सप्लोरर 6 सही ढंग से ऊंचाई को न्यूनतम ऊंचाई के रूप में परिभाषित नहीं करता है।
क्विक मोड में, 8.0 तक गलत तरीके से इंटरनेट एक्सप्लोरर और इसमें पैडिंग, मार्जिन और बॉर्डर वैल्यू को जोड़े बिना तत्व की ऊँचाई की गणना करता है।
Internet Explorer 7.0 या बाद के संस्करण का समर्थन नहीं करता है।
ऊंचाई CSS संपत्ति एक तत्व की ऊंचाई को निर्दिष्ट करती है। डिफ़ॉल्ट रूप से, संपत्ति सामग्री क्षेत्र की ऊंचाई को परिभाषित करती है। यदि बॉक्स-साइज़िंग बॉर्डर-बॉक्स पर सेट की जाती है, हालांकि, यह इसके बजाय सीमा क्षेत्र की ऊंचाई निर्धारित करता है।
इस इंटरैक्टिव उदाहरण के लिए स्रोत एक GitHub भंडार में संग्रहीत किया जाता है। यदि आप इंटरैक्टिव उदाहरण परियोजना में योगदान करना चाहते हैं, तो कृपया https://github.com/mdn/interactive-examples पर क्लोन करें और हमें एक पुल अनुरोध भेजें।
न्यूनतम ऊंचाई और अधिकतम ऊंचाई वाले गुण ऊंचाई को ओवरराइड करते हैं।
वाक्य - विन्यास
/ * कीवर्ड मूल्य * / ऊंचाई: ऑटो; / *मान
सीएसएस डेटा प्रकार एक दूरी मूल्य का प्रतिनिधित्व करता है। लंबाई का उपयोग कई सीएसएस गुणों में किया जा सकता है, जैसे कि चौड़ाई, ऊंचाई, मार्जिन, गद्दी, सीमा-चौड़ाई, फ़ॉन्ट-आकार, और पाठ-छाया। "\u003eऔपचारिक वाक्य-विन्यास
उदाहरण
एचटीएमएल
सीएसएस
div (चौड़ाई: 250px; मार्जिन-बॉटम: 5px; बॉर्डर: 2px सॉलिड ब्लू;) #taller (हाइट: 50px;) # स्टर (हाइट: 25px;) # अपरेंट (हाइट: 100px;) # स्किल्ड (हाइट: 50%) ; चौड़ाई: 75%;परिणाम
पहुँच की चिंता
सुनिश्चित करें कि ऊंचाई के साथ सेट किए गए तत्वों को छोटा नहीं किया गया है और / या अन्य सामग्री को अस्पष्ट नहीं करता है जब पृष्ठ का आकार बढ़ाने के लिए पृष्ठ को ज़ूम किया जाता है।
विशेष विवरण
विशिष्टता | स्थिति | टिप्पणी |
---|---|---|
CSS Intrinsic & Extrinsic Sizing Module Level 4 |
संपादक का मसौदा | |
CSS Intrinsic & Extrinsic Sizing Module Level 3 उस विनिर्देश में "ऊंचाई" की परिभाषा। |
काम चलाऊ प्रारूप | अधिकतम सामग्री, न्यूनतम सामग्री, फिट-सामग्री कीवर्ड जोड़े। |
सीएसएस संक्रमण उस विनिर्देश में "ऊंचाई" की परिभाषा। |
काम चलाऊ प्रारूप | एनिमेटेबल के रूप में ऊंचाई को सूचीबद्ध करता है। |
सीएसएस स्तर 2 (संशोधन 1) उस विनिर्देश में "ऊंचाई" की परिभाषा। |
सिफ़ारिश करना | सीएसएस डेटा प्रकार के लिए समर्थन जोड़ता है एक दूरी मूल्य का प्रतिनिधित्व करता है। लंबाई का उपयोग कई सीएसएस गुणों में किया जा सकता है, जैसे कि चौड़ाई, ऊंचाई, मार्जिन, गद्दी, सीमा-चौड़ाई, फ़ॉन्ट-आकार और पाठ-छाया। "\u003e |
सीएसएस स्तर 1 उस विनिर्देश में "ऊंचाई" की परिभाषा। |
सिफ़ारिश करना | प्रारंभिक परिभाषा। |
प्रारंभिक मूल्य | ऑटो |
---|---|
प्र लागू होता है | सभी तत्व लेकिन गैर-प्रतिस्थापित इनलाइन तत्व, टेबल कॉलम और कॉलम समूह |
विरासत में मिला | नहीं |
प्रतिशत | प्रतिशत की गणना उत्पन्न बॉक्स की ऊंचाई के संबंध में की जाती है। यदि ब्लॉक की ऊंचाई स्पष्ट रूप से निर्दिष्ट नहीं है (यानी, यह सामग्री की ऊंचाई पर निर्भर करता है), और यह तत्व पूरी तरह से तैनात नहीं है, तो मान गणना करता है ऑटो के लिए। मूल तत्व पर एक प्रतिशत ऊंचाई प्रारंभिक ब्लॉक के सापेक्ष है। |
मीडिया | दृश्य |
संगणित मूल्य | एक प्रतिशत या ऑटो या पूर्ण लंबाई |
एनीमेशन प्रकार | एक सीएसएस डेटा प्रकार को वास्तविक, फ्लोटिंग-पॉइंट संख्याओं के रूप में प्रक्षेपित किया जाता है। "\u003e लंबाई, सीएसएस डेटा प्रकार को वास्तविक, फ्लोटिंग-पॉइंट संख्याओं के रूप में प्रक्षेपित किया जाता है।"\u003e प्रतिशत या कैल्क (); |
विहित आदेश | औपचारिक व्याकरण द्वारा परिभाषित अद्वितीय गैर-अस्पष्ट आदेश |
ब्राउज़र संगतता
इस पृष्ठ पर संगतता तालिका संरचित डेटा से उत्पन्न होती है। यदि आप डेटा में योगदान करना चाहते हैं, तो कृपया https://github.com/mdn/browser-compat-data देखें और हमें एक पुल अनुरोध भेजें।
GitHub पर संगतता डेटा अपडेट करें
डेस्कटॉप | मोबाइल | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
क्रोम | धार | फ़ायरफ़ॉक्स | इंटरनेट एक्स्प्लोरर | ओपेरा | सफारी | Android वेबव्यू | Android के लिए क्रोम | Android के लिए फ़ायरफ़ॉक्स | Android के लिए ओपेरा | IOS पर सफारी | सैमसंग इंटरनेट | |
ऊंचाई | Chrome पूर्ण समर्थन 1 | एज फुल सपोर्ट 12 | फ़ायरफ़ॉक्स पूर्ण समर्थन 1 | IE पूर्ण समर्थन 4 | ओपेरा पूर्ण समर्थन 7 | सफारी पूर्ण समर्थन 1 | WebView Android पूर्ण समर्थन 1 | क्रोम Android पूर्ण समर्थन 18 | फ़ायरफ़ॉक्स Android पूर्ण समर्थन 4 | Opera Android पूर्ण समर्थन 10.1 | सफारी iOS पूर्ण समर्थन 1 | सैमसंग इंटरनेट Android पूर्ण समर्थन 1.0 |
फिट-सामग्री | क्रोम पूर्ण समर्थन 46 | एज नो सपोर्ट नं | फ़ायरफ़ॉक्स कोई समर्थन नहीं | IE कोई समर्थन नहीं | ओपेरा पूर्ण समर्थन 33 | सफारी पूर्ण समर्थन 11 पूर्ण समर्थन 11 पूर्ण समर्थन 9 पहले से जुड़ा हुआ पहले से जुड़ा हुआ | ओपेरा Android? | सफारी आईओएस फुल सपोर्ट 11 फुल सपोर्ट 11 फुल सपोर्ट 9 पहले से जुड़ा हुआ पहले से जुड़ा हुआ विक्रेता उपसर्ग के साथ कार्यान्वित: -webkit- | ||||
अधिकतम-सामग्री | क्रोम पूर्ण समर्थन 46 | एज नो सपोर्ट नं | पहले से जुड़ा हुआ पहले से जुड़ा हुआ | IE कोई समर्थन नहीं | ओपेरा पूर्ण समर्थन 44 | सफारी पूर्ण समर्थन 11 | WebView Android पूर्ण समर्थन 46 | क्रोम Android पूर्ण समर्थन 46 | पहले से जुड़ा हुआ पहले से जुड़ा हुआ विक्रेता उपसर्ग के साथ कार्यान्वित: -मोज़- | सैमसंग इंटरनेट एंड्रॉयड फुल सपोर्ट 5.0 | ||
मिनट-सामग्री | क्रोम पूर्ण समर्थन 46 | एज नो सपोर्ट नं | फ़ायरफ़ॉक्स पूर्ण समर्थन 66 पूर्ण समर्थन 66 पूर्ण समर्थन 3 पहले से जुड़ा हुआ पहले से जुड़ा हुआ विक्रेता उपसर्ग के साथ कार्यान्वित: -मोज़- | IE कोई समर्थन नहीं | ओपेरा पूर्ण समर्थन 44 | सफारी पूर्ण समर्थन 11 | WebView Android पूर्ण समर्थन 46 | क्रोम Android पूर्ण समर्थन 46 | फ़ायरफ़ॉक्स Android पूर्ण समर्थन 66 पूर्ण समर्थन 66 पूर्ण समर्थन 4 पहले से जुड़ा हुआ पहले से जुड़ा हुआ विक्रेता उपसर्ग के साथ कार्यान्वित: -मोज़- | ओपेरा Android पूर्ण समर्थन 43 | सफारी iOS पूर्ण समर्थन 11 | सैमसंग इंटरनेट एंड्रॉयड फुल सपोर्ट 5.0 |
खिंचाव | क्रोम पूर्ण समर्थन 28 वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम पूर्ण समर्थन 28वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम | एज नो सपोर्ट नं | फ़ायरफ़ॉक्स कोई समर्थन नहीं | IE कोई समर्थन नहीं | ओपेरा पूर्ण समर्थन 15 वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम पूर्ण समर्थन 15वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम गैर-मानक नाम का उपयोग करता है: -webkit-fill-available | सफारी पूर्ण समर्थन 9 वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम पूर्ण समर्थन 9वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम गैर-मानक नाम का उपयोग करता है: -webkit-fill-available | WebView Android पूर्ण समर्थन 4.4 वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम पूर्ण समर्थन 4.4वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम गैर-मानक नाम का उपयोग करता है: -webkit-fill-available | Chrome Android पूर्ण समर्थन 28 वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम पूर्ण समर्थन 28वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम गैर-मानक नाम का उपयोग करता है: -webkit-fill-available | फ़ायरफ़ॉक्स Android कोई समर्थन नहीं | ओपेरा Android? | सफारी iOS पूर्ण समर्थन 9 वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम पूर्ण समर्थन 9वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम गैर-मानक नाम का उपयोग करता है: -webkit-fill-available | सैमसंग इंटरनेट एंड्रॉयड फुल सपोर्ट 5.0 वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम पूर्ण समर्थन 5.0वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम वेबकिट भरण-उपलब्ध"\u003e वैकल्पिक नाम गैर-मानक नाम का उपयोग करता है: -webkit-fill-available |
किंवदंती
पूर्ण समर्थन पूर्ण समर्थन समर्थन नहीं समर्थन नहीं अनुकूलता अज्ञात संगतता अज्ञात एक गैर-मानक नाम का उपयोग करता है। एक गैर-मानक नाम का उपयोग करता है। उपयोग के लिए एक विक्रेता उपसर्ग या अलग नाम की आवश्यकता है। उपयोग के लिए एक विक्रेता उपसर्ग या अलग नाम की आवश्यकता है।डिफ़ॉल्ट रूप से, ब्लॉक तत्वों के लिए ऑटोविड का उपयोग किया जाता है। इसका मतलब यह है कि तत्व क्षैतिज रूप से उतना ही फैला होगा जितना कि मुक्त स्थान है। ब्लॉक तत्वों की डिफ़ॉल्ट ऊंचाई स्वचालित रूप से सेट होती है, अर्थात। ब्राउज़र सामग्री के सभी को प्रदर्शित करने के लिए सामग्री क्षेत्र को लंबवत रूप से फैलाता है। किसी तत्व के सामग्री क्षेत्र के लिए कस्टम आयाम सेट करने के लिए, आप चौड़ाई और ऊंचाई गुणों का उपयोग कर सकते हैं।
चौड़ाई सीएसएस संपत्ति आपको तत्व के सामग्री क्षेत्र की चौड़ाई निर्धारित करने की अनुमति देती है, और ऊंचाई संपत्ति सामग्री क्षेत्र की ऊंचाई:
ध्यान दें कि चौड़ाई और ऊंचाई के गुण केवल सामग्री क्षेत्र के आकार का निर्धारण करते हैं; एक ब्लॉक तत्व की कुल चौड़ाई की गणना करने के लिए, सामग्री क्षेत्र की चौड़ाई, बाईं और दाईं गद्दी, और बाईं और दाईं सीमा की चौड़ाई जोड़ें। वही तत्व की कुल ऊंचाई के लिए जाता है, केवल सभी मूल्यों की गणना लंबवत रूप से की जाती है:
इस पैराग्राफ के लिए, हम केवल चौड़ाई और ऊंचाई निर्धारित करेंगे।
इस पैराग्राफ में चौड़ाई और ऊंचाई के अलावा, पैडिंग, बॉर्डर और पैडिंग शामिल हैं।
प्रयत्न "उदाहरण स्पष्ट रूप से दर्शाता है कि दूसरा तत्व पहले की तुलना में अधिक जगह लेता है। यदि हम अपने सूत्र के अनुसार गणना करते हैं, तो पहले पैराग्राफ के आयाम 150x100 पिक्सेल हैं, और दूसरे पैराग्राफ के आयाम हैं:
कुल ऊंचाई: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | \u003d 130 पीएक्स |
ऊपरी ढांचा | ऊपरी मांगपत्र | ऊंचाई | कम मांगपत्र | तल ढांचा |
यानी 180x130 पिक्सल।
तत्वों का अतिप्रवाह
आपके द्वारा तत्व के लिए चौड़ाई और ऊंचाई को परिभाषित करने के बाद, यह एक महत्वपूर्ण बिंदु पर ध्यान देने योग्य है - तत्व के अंदर स्थित सामग्री निर्दिष्ट ब्लॉक आकार को पार कर सकती है। इस मामले में, कुछ सामग्री तत्व की सीमाओं से परे जाएगी, इस अप्रिय क्षण से बचने के लिए, आप CSS अतिप्रवाह संपत्ति का उपयोग कर सकते हैं। अतिप्रवाह संपत्ति ब्राउज़र को बताती है कि यदि ब्लॉक की सामग्री अपने आकार से अधिक हो तो क्या करना चाहिए। यह संपत्ति चार में से एक मान ले सकती है:
- दृश्यमान ब्राउज़र द्वारा उपयोग किया जाने वाला डिफ़ॉल्ट मान है। इस मान को सेट करने का एक ही प्रभाव होगा कि अतिप्रवाह संपत्ति की स्थापना न करें।
- स्क्रॉल - ऊर्ध्वाधर और क्षैतिज स्क्रॉलबार को तत्व में जोड़ता है।
- ऑटो - स्क्रॉलबार को आवश्यकतानुसार जोड़ता है।
- छिपा हुआ - कुछ ऐसी सामग्री को छिपाता है जो ब्लॉक तत्व की सीमा से परे जाती है।
सीएसएस चौड़ाई गुण तत्व के सामग्री क्षेत्र की चौड़ाई के मूल्य के लिए जिम्मेदार हैं।
चौड़ाई: मूल्य | ब्याज | ऑटो | इनहेरिट
सीएसएस ऊंचाई संपत्ति तत्व के सामग्री क्षेत्र की ऊंचाई के मूल्य के लिए जिम्मेदार है।
ऊँचाई: मान | ब्याज | ऑटो | इनहेरिट
ऊंचाई और चौड़ाई के लिए नकारात्मक मानों की अनुमति नहीं है।
ऐसा लगता है कि इन सीएसएस गुणों के साथ सब कुछ सरल और स्पष्ट है, लेकिन, वास्तव में, सब कुछ बिल्कुल सरल नहीं है।
500px की चौड़ाई की संपत्ति का उपयोग करके वेब पेज पर एक तत्व की चौड़ाई सेट करने का मतलब यह नहीं है कि उस तत्व की कुल चौड़ाई 500 पिक्सेल या उससे अधिक होगी।
समझने के लिए सबसे महत्वपूर्ण बात यह है कि चौड़ाई और ऊंचाई के गुण सामग्री क्षेत्र के लिए चौड़ाई और ऊंचाई निर्धारित करते हैं।
चौड़ाई और ऊंचाई के गुण केवल उन घटकों में से एक हैं जिनसे तत्व की कुल चौड़ाई और ऊंचाई की गणना की जाएगी। वे सामग्री क्षेत्र की चौड़ाई और ऊँचाई को इंगित करते हैं, जिसे निम्नलिखित छवि में देखा जा सकता है। साथ ही, कुल चौड़ाई और ऊंचाई के निर्माण में पैडिंग, मार्जिन और बॉर्डर जैसी संपत्तियां शामिल हैं।
यह अब आसानी से देखा जा सकता है।
उदाहरण के लिए, एक ही चौड़ाई के साथ दो ब्लॉक लेते हैं, लेकिन उनमें से एक अतिरिक्त रूप से पेडिंग संपत्ति सेट करेगा।
डिफ़ॉल्ट रूप से, वेब पेजों में व्यवहार होता है कि संबंधित पक्ष के लिए पैडिंग मान ऊंचाई और चौड़ाई मानों में जोड़ा जाता है।
उन। तत्व की कुल चौड़ाई तत्व की चौड़ाई की संपत्ति के मूल्य से मिलकर बनेगी, और पैडिंग-लेफ्ट और पेडिंग-राइट वैल्यू को इसमें जोड़ा जाएगा।
विभिन्न प्रकार के तत्वों के लिए जो पृष्ठ पर पाए जा सकते हैं, तत्वों की कुल चौड़ाई और ऊंचाई की गणना विशेष सूत्रों का उपयोग करके की जाती है।
विभिन्न प्रकार के तत्वों के लिए जो वेब पेजों पर पाए जा सकते हैं, चौड़ाई और ऊंचाई मानों में भिन्न व्यवहार और मूल्य हो सकते हैं।
एक समान स्थिति ऊंचाई की संपत्ति के साथ होगी।
CSS में एक विशेष एल्गोरिथ्म है जो एक वेब पेज पर विभिन्न तत्वों के लिए चौड़ाई और ऊंचाई मानों की गणना करता है। मैं अब इस एल्गोरिथ्म पर ध्यान नहीं दूंगा, क्योंकि यह कुछ जटिल है।
अब हमारे लिए मुख्य बात यह है कि चौड़ाई और ऊंचाई के गुण हमें तत्व की सामग्री के साथ क्षेत्र की चौड़ाई और ऊंचाई के साथ काम करने की अनुमति देते हैं, न कि तत्व की कुल चौड़ाई और ऊंचाई।