सीएसएस ऊंचाई और चौड़ाई
- पिछला पृष्ठ सीएसएस पैडिंग
- अगला पृष्ठ सीएसएस फ्रेम मॉडल
CSS ऊंचाई और चौड़ाई सेट करें
ऊंचाई
याद रखें वाइड्थ
प्रयोग करें
height और width गुण अंतरिम अंतराल, किनारा या बाह्य-अंतराल नहीं शामिल करते। वे एलेमेंट के अंतरिम अंतराल, किनारा और बाह्य-अंतराल के अंदर के क्षेत्र की ऊंचाई/चौड़ाई को सेट करते हैं。
CSS ऊंचाई और चौड़ाई मान
ऊंचाई
याद रखें वाइड्थ
प्रयोग के लिए इस प्रयोग को लागू करें:
auto
- डिफ़ॉल्ट। ब्राउज़र ऊंचाई और चौड़ाई को गणना करता है。length
- px, cm आदि से ऊंचाई/चौड़ाई निर्धारित की जाती है。%
- इनक्लुजन बॉक्स के प्रतिशत (%) से ऊंचाई/चौड़ाई निर्धारित की जाती है。initial
- ऊंचाई/चौड़ाई को डिफ़ॉल्ट मान रखा जाता है。inherit
- अपने पैरेन्ट के मान से ऊंचाई/चौड़ाई को ले लेता है。
CSS ऊंचाई और चौड़ाई उदाहरण
उदाहरण
एलेमेंट की ऊंचाई और चौड़ाई निर्धारित करें:
div { height: 200px; width: 50%; background-color: powderblue; }
उदाहरण
एक और <div> एलेमेंट की ऊंचाई और चौड़ाई निर्धारित करें:
div { height: 100px; प्रयोग करें background-color: powderblue; }
चौड़ाईनोट:ऊंचाई
याद रखें वाइड्थ
प्रयोग के लिए इस प्रयोग को पूर्ण करें!
प्रयोग करें
max-width
प्रयोग कीजिए (px, cm आदि) या पूर्ण बॉक्स के प्रतिशत (%) के रूप में max-width (अधिकतम चौड़ाई) को निर्धारित किया जा सकता है या इसे none (डिफ़ॉल्ट मान) के रूप में निर्धारित किया जा सकता है。
इसके लिए
जब ब्राउज़र विंडो की चौड़ाई एलेमेंट की चौड़ाई से कम हो जाए (500px) तो इसका एक प्रश्न उठता है: <div>
का प्रश्न उठता है। तब, ब्राउज़र एक स्क्रॉल बार जोड़ देगा。
इस स्थिति में max-width
ब्राउज़र के छोटे विंडो का संबंध कम करने में मदद कर सकती है。
सलाह:ब्राउज़र विंडो को 500px से कम चौड़ाई वाले चौड़ाई में खींचकर दो दिवज के बीच के अंतर को देखें!
इस एलेमेंट की ऊंचाई 100 पिक्सेल है, अधिकतम चौड़ाई 500 पिक्सेल है。
नोट:max-width
गुण का मान वाइड्थ
(चौड़ाई)。
उदाहरण
इस <div> एलेमेंट की ऊंचाई 100 पिक्सेल है, अधिकतम चौड़ाई 500 पिक्सेल है:
div { max-width: 500px; height: 100px; background-color: powderblue; }
और अधिक उदाहरण
- एलेमेंट की ऊंचाई और चौड़ाई निर्धारित करना
- यह उदाहरण दिखाता है कि कैसे अलग-अलग एलेमेंट की ऊंचाई और चौड़ाई निर्धारित की जा सकती है。
- प्रतिशत मान से इमेज की ऊंचाई और चौड़ाई निर्धारित करना
- यह उदाहरण दिखाता है कि कैसे प्रतिशत मान से इमेज की ऊंचाई और चौड़ाई निर्धारित की जा सकती है。
- एलेमेंट की न्यूनतम और अधिकतम चौड़ाई निर्धारित करना
- यह उदाहरण दिखाता है कि कैसे आकार के अनुक्रम से एलेमेंट की न्यूनतम और अधिकतम चौड़ाई निर्धारित की जा सकती है。
- एलिमेंट की न्यूनतम ऊंचाई और अधिकतम ऊंचाई सेट करें
- इस इंस्टेंस में आयत्तांक मान के द्वारा एलिमेंट की न्यूनतम ऊंचाई और अधिकतम ऊंचाई को सेट करने के तरीके दिखाया गया है。
CSS आकार अट्रिब्यूट सेट करें
अट्रिब्यूट | वर्णन |
---|---|
ऊंचाई | सेट एलिमेंट की ऊंचाई |
max-height | सेट एलिमेंट की अधिकतम ऊंचाई |
max-width | सेट एलिमेंट की अधिकतम चौड़ाई |
min-height | सेट एलिमेंट की न्यूनतम ऊंचाई |
min-width | सेट एलिमेंट की न्यूनतम चौड़ाई |
वाइड्थ | सेटिंग एलिमेंट की चौड़ाई |
- पिछला पृष्ठ सीएसएस पैडिंग
- अगला पृष्ठ सीएसएस फ्रेम मॉडल