CSS Height & Width – एलिमेंट्स की ऊंचाई और चौड़ाई

CSS Height और Width प्रॉपर्टीज़ का उपयोग किसी भी HTML एलिमेंट की ऊंचाई (height) और चौड़ाई (width) को नियंत्रित करने के लिए किया जाता है। इनका सही तरीके से उपयोग करने से आप अपने वेब पेज के डिज़ाइन को अधिक सटीक और आकर्षक बना सकते हैं। इस अध्याय में, हम CSS Height और Width के बारे में विस्तार से चर्चा करेंगे, इनके सिंटैक्स, उदाहरण, और इन्हें प्रभावी तरीके से लागू करने के बारे में जानेंगे।

CSS Height & Width का परिचय

Height और Width प्रॉपर्टीज़ का उपयोग किसी भी एलिमेंट (जैसे, div, img, section, आदि) की ऊंचाई और चौड़ाई को सेट करने के लिए किया जाता है। यह दो महत्वपूर्ण प्रॉपर्टीज़ हैं जो आपके डिज़ाइन को नियंत्रित करने में मदद करती हैं, क्योंकि आप इनका उपयोग करके एलिमेंट्स को एक निर्धारित आकार में सेट कर सकते हैं।

Syntax:

height: value;
width: value;

value: यह वह माप है जो एलिमेंट की ऊंचाई और चौड़ाई को निर्धारित करता है। यह पिक्सल (px), प्रतिशत (%), em, rem, या अन्य यूनिट्स हो सकता है।

CSS Height & Width का उपयोग

1. Height प्रॉपर्टी

height प्रॉपर्टी का उपयोग एलिमेंट की ऊंचाई (vertical size) को सेट करने के लिए किया जाता है। यह कंटेंट बॉक्स के ऊपरी और निचले हिस्से के बीच की दूरी को निर्धारित करता है।

Example:

div {
    height: 200px;
}

यह कोड div एलिमेंट की ऊंचाई को 200px सेट करेगा।

2. Width प्रॉपर्टी

width प्रॉपर्टी का उपयोग एलिमेंट की चौड़ाई (horizontal size) को सेट करने के लिए किया जाता है। यह कंटेंट बॉक्स के बाएं और दाएं हिस्से के बीच की दूरी को निर्धारित करता है।

Example:

div {
    width: 300px;
}

यह कोड div एलिमेंट की चौड़ाई को 300px सेट करेगा।

CSS Height & Width के Unit Types

Height और Width प्रॉपर्टीज़ को सेट करने के लिए विभिन्न यूनिट्स का उपयोग किया जा सकता है। सबसे सामान्य यूनिट्स में शामिल हैं:

Pixels (px):
यह सबसे सामान्य यूनिट है, जो एक निश्चित माप को निर्धारित करता है। उदाहरण: 200px.
Percentage (%):
यह यूनिट पैरेंट एलिमेंट के सापेक्ष माप तय करती है। उदाहरण: 50% का मतलब पैरेंट के आकार का आधा।
Em & Rem:
यह यूनिट्स रिफ़रेंस के रूप में फ़ॉन्ट साइज का उपयोग करती हैं। 1em या 1rem पैरेंट या रूट एलिमेंट के फ़ॉन्ट साइज के बराबर होता है।
Viewport Width (vw) & Viewport Height (vh):
ये यूनिट्स ब्राउज़र विंडो के आकार के सापेक्ष माप देती हैं। उदाहरण: 10vw का मतलब ब्राउज़र की चौड़ाई का 10%।

CSS Height & Width के Examples

Example 1: Fixed Height and Width

div {
    height: 200px;
    width: 300px;
    background-color: lightblue;
}

यह कोड div एलिमेंट की ऊंचाई 200px और चौड़ाई 300px सेट करेगा, और इसका बैकग्राउंड लाइटब्लू रंग का होगा।

Example 2: Height in Percentage

div {
    height: 50%;
    width: 100%;
    background-color: lightgreen;
}

यह कोड div एलिमेंट की ऊंचाई पैरेंट एलिमेंट की ऊंचाई का 50% और चौड़ाई पैरेंट एलिमेंट की 100% होगी।

Example 3: Width with Viewport Units

div {
    height: 100vh;
    width: 50vw;
    background-color: lightcoral;
}

यह कोड div एलिमेंट की ऊंचाई पूरी स्क्रीन की ऊंचाई (100vh) और चौड़ाई स्क्रीन की चौड़ाई का 50% (50vw) सेट करेगा।

CSS Auto Height & Width

जब आप auto का उपयोग करते हैं, तो एलिमेंट अपनी प्राकृतिक ऊंचाई और चौड़ाई के आधार पर आकार लेता है। यह खासतौर पर तब उपयोगी होता है जब आप कंटेंट को उसके अनुसार आकार देना चाहते हैं, जैसे टेक्स्ट, इमेज आदि के लिए।

Example 1: Auto Width

div {
    width: auto;
    background-color: lightyellow;
}

यह कोड div एलिमेंट की चौड़ाई को उसकी कंटेंट के आधार पर सेट करेगा। मतलब, यदि कंटेंट अधिक होता है, तो चौड़ाई भी बढ़ेगी।

Example 2: Auto Height

div {
    height: auto;
    background-color: lightgray;
}

यह कोड div एलिमेंट की ऊंचाई को उसकी कंटेंट के आधार पर सेट करेगा। कंटेंट जितना अधिक होगा, एलिमेंट की ऊंचाई उतनी बढ़ेगी।

CSS Max-Height और Max-Width

max-height और max-width प्रॉपर्टीज़ का उपयोग किसी एलिमेंट की अधिकतम ऊंचाई और चौड़ाई सेट करने के लिए किया जाता है। इसका उपयोग तब होता है जब आप चाहते हैं कि एलिमेंट एक निश्चित आकार से अधिक न बढ़े।

Example 1: Max Height

div {
    height: 300px;
    max-height: 500px;
    background-color: lightpink;
}

यह कोड div एलिमेंट की ऊंचाई 300px से अधिक नहीं बढ़ने देगा, लेकिन अगर कंटेंट के कारण एलिमेंट 500px से अधिक बढ़ता है, तो उसे भी कंट्रोल किया जाएगा।

Example 2: Max Width

div {
    width: 400px;
    max-width: 600px;
    background-color: lightblue;
}

यह कोड div एलिमेंट की चौड़ाई 400px होगी, लेकिन अगर कंटेंट या विंडो आकार बढ़ने से चौड़ाई 600px से अधिक होनी चाहिए, तो उसे 600px तक सीमित कर दिया जाएगा।

CSS Min-Height और Min-Width

min-height और min-width प्रॉपर्टीज़ का उपयोग किसी एलिमेंट की न्यूनतम ऊंचाई और चौड़ाई सेट करने के लिए किया जाता है। इसका उपयोग तब होता है जब आप सुनिश्चित करना चाहते हैं कि एलिमेंट का आकार कभी भी एक निश्चित माप से कम न हो।

Example 1: Min Height

div {
    height: 100px;
    min-height: 200px;
    background-color: lightyellow;
}

यह कोड div एलिमेंट की ऊंचाई 200px से कम नहीं होने देगा। यदि कंटेंट छोटा होता है तो भी एलिमेंट की ऊंचाई 200px से कम नहीं होगी।

Example 2: Min Width

div {
    width: 150px;
    min-width: 200px;
    background-color: lightgreen;
}

यह कोड div एलिमेंट की चौड़ाई 200px से कम नहीं होने देगा, भले ही कंटेंट छोटा हो।

CSS Height & Width के Best Practices

Responsive Design:
Percentage, vw, और vh जैसे यूनिट्स का उपयोग करें, ताकि आपका डिज़ाइन विभिन्न स्क्रीन आकारों पर सही तरीके से काम करे।
Avoid Fixed Size for Dynamic Content:
कंटेंट के आकार के अनुसार auto का उपयोग करें। इससे डिज़ाइन अधिक फ्लेक्सिबल और रिस्पॉन्सिव रहेगा।
Use Max/Min Width & Height:
जब आप चाहते हैं कि एलिमेंट एक न्यूनतम या अधिकतम आकार तक सीमित हो, तो min-width और max-width का उपयोग करें। यह आपके डिज़ाइन को नियंत्रित रखने में मदद करता है।

निष्कर्ष

CSS Height और Width प्रॉपर्टीज़ का उपयोग एलिमेंट्स के आकार को सेट करने के लिए किया जाता है। इनका सही उपयोग आपके वेब पेज को अधिक नियंत्रित और आकर्षक बनाता है। Height और Width के साथ अन्य प्रॉपर्टीज़ जैसे max-height, min-height, auto, आदि का उपयोग करके आप अपने डिज़ाइन को बेहतर बना सकते हैं।