लोड हो रहा है...

चौड़ाई और ऊंचाई

चौड़ाई (width) और ऊंचाई (height) CSS की ऐसी महत्वपूर्ण प्रॉपर्टीज़ हैं जो वेबपेज पर किसी भी तत्व के आकार को निर्धारित करती हैं। ये वैसा ही है जैसे एक मकान बनाते समय कमरे की चौड़ाई और ऊंचाई तय करना जरूरी होता है, ताकि घर में सही जगह और आराम मिल सके। वेब डिज़ाइन में भी, सही चौड़ाई और ऊंचाई तय करने से वेबसाइट का लेआउट सुसंगत, आकर्षक और उपयोगकर्ता के अनुकूल बनता है।
पोर्टफोलियो वेबसाइट में ये प्रॉपर्टीज़ आपके प्रोजेक्ट्स और तस्वीरों को सही आकार और स्थान देती हैं। ब्लॉग या न्यूज साइट पर ये टेक्स्ट और मीडिया कंटेंट को पढ़ने में आसान और व्यवस्थित बनाती हैं। ई-कॉमर्स साइट पर उत्पादों को सही ढंग से प्रदर्शित करने के लिए चौड़ाई और ऊंचाई का सटीक उपयोग होता है, जबकि सोशल प्लेटफ़ॉर्म्स पर ये यूज़र पोस्ट और प्रोफाइल्स को खूबसूरती से व्यवस्थित करने में मदद करती हैं।
इस ट्यूटोरियल में आप चौड़ाई और ऊंचाई के विभिन्न यूनिट्स, फिक्स्ड और रेस्पॉन्सिव डिज़ाइन में इनका उपयोग, और इनके साथ जुड़ी बेस्ट प्रैक्टिसेज़ सीखेंगे। जैसे घर की सजावट में सही अनुपात जरूरी है, वैसे ही वेबसाइट के तत्वों की चौड़ाई और ऊंचाई को समझदारी से सेट करना जरूरी है ताकि यूज़र का अनुभव बेहतर हो।

मूल उदाहरण

css

CSS Code

/* Basic box with fixed width and height */
.box {
width: 360px;           /* Fixed width */
height: 210px;          /* Fixed height */
background-color: #3498db; /* Blue background for visibility */
margin: 30px auto;      /* Center horizontally with vertical margin */
border-radius: 10px;    /* Rounded corners */
}

इस कोड में हमने .box क्लास वाले एक डिव को 360px चौड़ाई और 210px ऊंचाई दी है, जो पिक्सेल यूनिट के साथ फिक्स्ड होती है। पिक्सेल यूनिट पेज पर तत्व की सटीक माप निर्धारित करती है, जिसका अर्थ है कि यह आकार हर डिवाइस पर एक समान रहेगा। background-color प्रॉपर्टी से बॉक्स का रंग नीला सेट किया गया है ताकि यह साफ़ दिखे। margin: 30px auto ने बॉक्स को होरिजॉन्टली सेंटर किया और ऊपर-नीचे 30px की जगह दी है। border-radius से बॉक्स के कोनों को गोल किया गया है जिससे डिज़ाइन में सौंदर्य आता है।
शुरुआती लोगों के लिए यह जानना जरूरी है कि फिक्स्ड माप छोटे स्क्रीन पर कभी-कभी समस्या पैदा कर सकते हैं, क्योंकि ये स्क्रीन साइज़ के अनुसार एडजस्ट नहीं होते। इसलिए रेस्पॉन्सिव डिज़ाइन में आमतौर पर प्रतिशत या viewport यूनिट्स का उपयोग किया जाता है, जो बाद के उदाहरण में समझाया जाएगा।

व्यावहारिक उदाहरण

css

CSS Code

/* Responsive card for portfolio website */
.card {
width: 70%;              /* Width relative to container */
max-width: 600px;        /* Maximum width */
height: auto;            /* Height adjusts to content */
min-height: 260px;       /* Minimum height to maintain balance */
background-color: #ecf0f1;
padding: 20px;
margin: 40px auto;
box-sizing: border-box;  /* Includes padding and border in size */
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-radius: 12px;
}

यह उदाहरण एक रेस्पॉन्सिव कार्ड को दिखाता है, जो पोर्टफोलियो वेबसाइट या ब्लॉग के लिए उपयुक्त है। width: 70% का मतलब है कि कार्ड कंटेनर की चौड़ाई का 70% तक फैल सकता है, जिससे यह विभिन्न स्क्रीन साइज़ पर समायोजित हो जाता है। max-width 600px से सुनिश्चित होता है कि कार्ड बहुत बड़े स्क्रीन पर भी इस चौड़ाई से अधिक नहीं होगा।
height:auto सेट करने से कार्ड की ऊंचाई उसके कंटेंट के आधार पर स्वचालित रूप से एडजस्ट होती है। min-height 260px की न्यूनतम ऊंचाई तय करता है जिससे कार्ड बहुत छोटा नहीं दिखेगा और डिज़ाइन संतुलित रहेगा। box-sizing: border-box बेहद महत्वपूर्ण है क्योंकि यह padding और border को कुल आकार में शामिल करता है, जिससे लेआउट बेहतर तरीके से नियंत्रित होता है।
जैसे घर की सजावट में कमरे के फर्नीचर और आकार को उसकी जगह के हिसाब से एडजस्ट करते हैं, वैसे ही वेबसाइट के कार्ड की चौड़ाई और ऊंचाई को कंटेंट और स्क्रीन के अनुसार सेट किया जाता है।

बेस्ट प्रैक्टिसेज और सामान्य गलतियां:
बेस्ट प्रैक्टिसेज:

मोबाइल-फर्स्ट डिजाइन अपनाएं और चौड़ाई-ऊंचाई के लिए % या viewport (vw, vh) जैसी रिलेटिव यूनिट्स का इस्तेमाल करें ताकि रेस्पॉन्सिवनेस बनी रहे।
box-sizing: border-box का उपयोग करें जिससे padding और border चौड़ाई और ऊंचाई में शामिल हों।
max-width और min-height सेट करें ताकि लेआउट संतुलित और पठनीय रहे।
CSS को मॉड्यूलर और व्यवस्थित रखें ताकि स्पेसिफिसिटी कॉन्फ्लिक्ट कम हों और मेंटेनेंस आसान हो।
गलतियां जो बचें:
सिर्फ फिक्स्ड पिक्सेल वैल्यू पर निर्भर होना, जो छोटे या बड़े स्क्रीन पर समस्याएं लाता है।
padding और border को बॉक्स के आकार में शामिल न करना, जिससे डिजाइन टूट सकता है।
ज़्यादा CSS ओवरराइड करना, जिससे स्टाइलिंग में समस्याएं होती हैं।
विभिन्न स्क्रीन साइज़ पर टेस्ट न करना, जो खराब यूजर एक्सपीरियंस देता है।
डिबगिंग टिप्स:
ब्राउज़र के डेवलपर टूल्स का इस्तेमाल करें, जहां आप बॉक्स मॉडल की सही चौड़ाई और ऊंचाई देख सकते हैं और CSS के टकराव खोज सकते हैं। box-sizing के प्रभाव को समझने के लिए इसे टॉगल कर देखें।

📊 त्वरित संदर्भ

Property/Method	Description	Example
width	तत्व की चौड़ाई सेट करता है	width: 75%;
height	तत्व की ऊंचाई सेट करता है	height: 300px;
max-width	अधिकतम चौड़ाई सीमित करता है	max-width: 650px;
min-height	न्यूनतम ऊंचाई तय करता है	min-height: 220px;
box-sizing	बॉक्स मॉडल की गणना नियंत्रित करता है	box-sizing: border-box;
height: auto	कंटेंट के अनुसार ऊंचाई समायोजित करता है	height: auto;

संक्षेप में, चौड़ाई और ऊंचाई CSS की ऐसी प्रॉपर्टीज़ हैं जो वेबपेज के लेआउट और यूजर इंटरफेस के लिए अत्यंत महत्वपूर्ण हैं। इनका सही उपयोग वेबसाइट को संतुलित, पठनीय और आकर्षक बनाता है। HTML स्ट्रक्चर और JavaScript के साथ मिलकर ये प्रॉपर्टीज़ डायनेमिक और इंटरेक्टिव डिज़ाइन के लिए भी आधार बनती हैं।
आगे बढ़ने के लिए CSS Flexbox और Grid लेआउट तकनीकों को समझना उपयोगी होगा, जो चौड़ाई और ऊंचाई के कॉन्सेप्ट्स पर आधारित हैं और अधिक जटिल और उत्तरदायी डिज़ाइनों को संभव बनाते हैं। अभ्यास और विभिन्न डिवाइसेज़ पर टेस्टिंग से आप इन कौशलों में महारत हासिल कर पाएंगे।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपना ज्ञान परखें

व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी

भाषा