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