चौड़ाई और ऊंचाई: तत्व का आकार निर्धारित करें। 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 पर क्लोन करें और हमें एक पुल अनुरोध भेजें।

न्यूनतम ऊंचाई और अधिकतम ऊंचाई वाले गुण ऊंचाई को ओवरराइड करते हैं।

वाक्य - विन्यास

/ * कीवर्ड मूल्य * / ऊंचाई: ऑटो; / * मान * / ऊंचाई: 120px; ऊंचाई: 10em; / * मूल्य * / ऊंचाई: 75%; / * वैश्विक मूल्य * / ऊंचाई: विरासत; ऊंचाई: प्रारंभिक; ऊंचाई: परेशान;

मान

सीएसएस डेटा प्रकार एक दूरी मूल्य का प्रतिनिधित्व करता है। लंबाई का उपयोग कई सीएसएस गुणों में किया जा सकता है, जैसे कि चौड़ाई, ऊंचाई, मार्जिन, गद्दी, सीमा-चौड़ाई, फ़ॉन्ट-आकार, और पाठ-छाया। "\u003e ऊंचाई को निरपेक्ष मान के रूप में परिभाषित करता है। सीएसएस डेटा प्रकार एक प्रतिशत मूल्य का प्रतिनिधित्व करता है। इसका उपयोग अक्सर किसी तत्व की मूल वस्तु के सापेक्ष आकार को परिभाषित करने के लिए किया जाता है। कई गुण प्रतिशतता का उपयोग कर सकते हैं जैसे चौड़ाई ऊंचाई मार्जिन पैडिंग और फ़ॉन्ट-आकार।\u003e ऊंचाई को परिभाषित ब्लॉक की ऊंचाई के प्रतिशत के रूप में परिभाषित करता है। ऑटो ब्राउज़र की गणना करेगा और निर्दिष्ट तत्व के लिए एक ऊंचाई का चयन करेगा। अधिकतम सामग्री आंतरिक पसंद की ऊंचाई। न्यूनतम सामग्री आंतरिक न्यूनतम ऊंचाई। फ़िट-सामग्री (सीएसएस डेटा प्रकार एक मान का प्रतिनिधित्व करता है जो या तो एक हो सकता है या ए ."> ) निर्दिष्ट तर्क द्वारा प्रतिस्थापित उपलब्ध स्थान के साथ फिट-सामग्री सूत्र का उपयोग करता है, अर्थात न्यूनतम (अधिकतम सामग्री, अधिकतम (न्यूनतम सामग्री,))।

औपचारिक वाक्य-विन्यास

सीएसएस डेटा प्रकार एक प्रतिशत मूल्य का प्रतिनिधित्व करता है। इसका उपयोग अक्सर किसी तत्व की मूल वस्तु के सापेक्ष आकार को परिभाषित करने के लिए किया जाता है। कई गुण प्रतिशतता का उपयोग कर सकते हैं जैसे चौड़ाई ऊंचाई मार्जिन पैडिंग और फ़ॉन्ट-आकार।\u003e बॉर्डर-बॉक्स सामग्री-बॉक्स उपलब्ध न्यूनतम-सामग्री अधिकतम-सामग्री फिट-सामग्री ऑटो

उदाहरण

एचटीएमएल

मैं 50 मीटर लंबा हूं।
मैं 25 मीटर लंबा हूं।
मैं अपने माता-पिता की ऊंचाई का आधा हिस्सा हूं।

सीएसएस

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फ़ायरफ़ॉक्स पूर्ण समर्थन 1IE पूर्ण समर्थन 4ओपेरा पूर्ण समर्थन 7सफारी पूर्ण समर्थन 1WebView Android पूर्ण समर्थन 1क्रोम Android पूर्ण समर्थन 18फ़ायरफ़ॉक्स Android पूर्ण समर्थन 4Opera Android पूर्ण समर्थन 10.1सफारी iOS पूर्ण समर्थन 1सैमसंग इंटरनेट Android पूर्ण समर्थन 1.0
फिट-सामग्रीक्रोम पूर्ण समर्थन 46एज नो सपोर्ट नंफ़ायरफ़ॉक्स कोई समर्थन नहींIE कोई समर्थन नहींओपेरा पूर्ण समर्थन 33सफारी पूर्ण समर्थन 11 पूर्ण समर्थन 11 पूर्ण समर्थन 9

पहले से जुड़ा हुआ

पहले से जुड़ा हुआ
ओपेरा Android?सफारी आईओएस फुल सपोर्ट 11 फुल सपोर्ट 11 फुल सपोर्ट 9

पहले से जुड़ा हुआ

पहले से जुड़ा हुआ विक्रेता उपसर्ग के साथ कार्यान्वित: -webkit-
अधिकतम-सामग्रीक्रोम पूर्ण समर्थन 46एज नो सपोर्ट नं

पहले से जुड़ा हुआ

पहले से जुड़ा हुआ
IE कोई समर्थन नहींओपेरा पूर्ण समर्थन 44सफारी पूर्ण समर्थन 11WebView Android पूर्ण समर्थन 46क्रोम Android पूर्ण समर्थन 46

पहले से जुड़ा हुआ

पहले से जुड़ा हुआ विक्रेता उपसर्ग के साथ कार्यान्वित: -मोज़-
सैमसंग इंटरनेट एंड्रॉयड फुल सपोर्ट 5.0
मिनट-सामग्रीक्रोम पूर्ण समर्थन 46एज नो सपोर्ट नंफ़ायरफ़ॉक्स पूर्ण समर्थन 66 पूर्ण समर्थन 66 पूर्ण समर्थन 3

पहले से जुड़ा हुआ

पहले से जुड़ा हुआ विक्रेता उपसर्ग के साथ कार्यान्वित: -मोज़-
IE कोई समर्थन नहींओपेरा पूर्ण समर्थन 44सफारी पूर्ण समर्थन 11WebView 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 पिक्सेल या उससे अधिक होगी।

समझने के लिए सबसे महत्वपूर्ण बात यह है कि चौड़ाई और ऊंचाई के गुण सामग्री क्षेत्र के लिए चौड़ाई और ऊंचाई निर्धारित करते हैं।

चौड़ाई और ऊंचाई के गुण केवल उन घटकों में से एक हैं जिनसे तत्व की कुल चौड़ाई और ऊंचाई की गणना की जाएगी। वे सामग्री क्षेत्र की चौड़ाई और ऊँचाई को इंगित करते हैं, जिसे निम्नलिखित छवि में देखा जा सकता है। साथ ही, कुल चौड़ाई और ऊंचाई के निर्माण में पैडिंग, मार्जिन और बॉर्डर जैसी संपत्तियां शामिल हैं।

यह अब आसानी से देखा जा सकता है।

उदाहरण के लिए, एक ही चौड़ाई के साथ दो ब्लॉक लेते हैं, लेकिन उनमें से एक अतिरिक्त रूप से पेडिंग संपत्ति सेट करेगा।

चौड़ाई: 100px
चौड़ाई: 100px + गद्दी

डिफ़ॉल्ट रूप से, वेब पेजों में व्यवहार होता है कि संबंधित पक्ष के लिए पैडिंग मान ऊंचाई और चौड़ाई मानों में जोड़ा जाता है।

उन। तत्व की कुल चौड़ाई तत्व की चौड़ाई की संपत्ति के मूल्य से मिलकर बनेगी, और पैडिंग-लेफ्ट और पेडिंग-राइट वैल्यू को इसमें जोड़ा जाएगा।

विभिन्न प्रकार के तत्वों के लिए जो पृष्ठ पर पाए जा सकते हैं, तत्वों की कुल चौड़ाई और ऊंचाई की गणना विशेष सूत्रों का उपयोग करके की जाती है।

विभिन्न प्रकार के तत्वों के लिए जो वेब पेजों पर पाए जा सकते हैं, चौड़ाई और ऊंचाई मानों में भिन्न व्यवहार और मूल्य हो सकते हैं।

एक समान स्थिति ऊंचाई की संपत्ति के साथ होगी।

ऊंचाई: 100 पीएक्स
ऊँचाई: 100px + पैडिंग

CSS में एक विशेष एल्गोरिथ्म है जो एक वेब पेज पर विभिन्न तत्वों के लिए चौड़ाई और ऊंचाई मानों की गणना करता है। मैं अब इस एल्गोरिथ्म पर ध्यान नहीं दूंगा, क्योंकि यह कुछ जटिल है।

अब हमारे लिए मुख्य बात यह है कि चौड़ाई और ऊंचाई के गुण हमें तत्व की सामग्री के साथ क्षेत्र की चौड़ाई और ऊंचाई के साथ काम करने की अनुमति देते हैं, न कि तत्व की कुल चौड़ाई और ऊंचाई।