CSS ऊंचाई और चौड़ाई
आप बॉक्स को फ्रेम करते, गोल करते और बाहरी-भीतरी जगह देते हैं। अगला कौशल: बताएँ बॉक्स कितना बड़ा हो। width और height कंटेंट बॉक्स का आकार सेट करते हैं — वह कोर कितना चौड़ा और कितना ऊँचा हो।
width और height क्या करते हैं?
width क्षैतिज आकार नियंत्रित करता है। height ऊर्ध्वाधर आकार। आम मान px जैसी लंबाई या % जैसे सापेक्ष आकार इस्तेमाल करते हैं। अगर न छुएँ, कई तत्व अपनी सामग्री और लेआउट संदर्भ से आकार लेते हैं।
पिक्सेल में स्थिर आकार
साफ़ रोज़ाना शुरुआत: पैनल को पिक्सेल में सटीक चौड़ाई (और वैकल्पिक ऊँचाई) दें।
स्थिर पिक्सेल चौड़ाई
css.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}चौड़ाई और ऊँचाई साथ
जब डिज़ाइन को निश्चित आयत चाहिए — थंबनेल फ्रेम, टाइल, मीडिया स्लॉट — दोनों सेट करें।
टाइल पर चौड़ाई और ऊँचाई
css.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}प्रतिशत चौड़ाई
% चौड़ाई आमतौर पर कंटेनिंग ब्लॉक की चौड़ाई (अक्सर पैरेंट) के सापेक्ष होती है। width: 50% मतलब «लगभग पैरेंट जितनी आधी चौड़ाई», जादुई रूप से आधा स्क्रीन नहीं।
पैरेंट की आधी चौड़ाई
css.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}आकार देने वाले उपकरण एक नज़र में
सादे width/height के अलावा CSS रेलिंग भी देता है।
📊 चौड़ाई और ऊँचाई के उपकरण
| उपकरण | भूमिका | रोज़ाना नोट |
|---|---|---|
width / height |
कंटेंट बॉक्स का पसंदीदा आकार | स्थिर या तरल आकार यहीं से शुरू करें |
min-width / min-height |
इससे छोटा न सिकुड़े | बटन या साइडबार उपयोगी रहें |
max-width / max-height |
इससे बड़ा न बढ़े | विशाल छवियाँ या चौड़ी टेक्स्ट नरम करें |
auto |
ब्राउज़र गणना करे | डिफ़ॉल्ट ऊँचाई अक्सर सामग्री के साथ |
% |
कंटेनिंग ब्लॉक के सापेक्ष | चौड़ाई % आम; ऊँचाई % को परिभाषित पैरेंट ऊँचाई चाहिए |
min-width फर्श की तरह
जब लेआउट दबे तब भी बॉक्स उपयोगी रहना चाहिए, तब काम आता है।
न्यूनतम चौड़ाई का फर्श
css.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}max-width छत की तरह
पढ़ने लायक टेक्स्ट या बड़ी स्क्रीन पर अनंत न खिंचने वाली छवियों की क्लासिक आदत।
अधिकतम चौड़ाई की छत
css.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}ऊँचाई अक्सर auto रहती है
टेक्स्ट ब्लॉकों के लिए ऊँचाई सामग्री के साथ बढ़ने दें। बहुत छोटी स्थिर ऊँचाई टेक्स्ट काट सकती है जब तक overflow न सोचें (बाद का पाठ)।
auto ऊँचाई सामग्री के साथ
css.article {
width: 100%;
max-width: 36rem;
height: auto; /* पैराग्राफ के साथ बढ़ती है */
padding: 1rem;
border: 1px solid #cbd5e1;
}खुद आज़माएँ
width: 320pxऔर दिखने वाले padding/बॉर्डर वाला पैनल।- चौड़ाई और ऊँचाई दोनों वाली 160×120 टाइल।
- चौड़े पैरेंट में
width: 50%वाला बच्चा; पैरेंट का आकार बदलें। - बटन पर
min-width: 12remलगाएँ और viewport छोटा करें। - टेक्स्ट ब्लॉक को
max-width: 40remऔरheight: autoदें — फिर बहुत छोटी स्थिर ऊँचाई आज़माकर कटने का जोखिम देखें।
आम गलतियाँ
- पैरेंट की स्पष्ट ऊँचाई के बिना
height: 50%(प्रतिशत अपेक्षित न लगे) - टेक्स्ट बॉक्स पर छोटी
heightलॉक कर सामग्री कटने पर हैरानी - बड़ी छवियों या लंबी पंक्तियों पर
max-widthभूलना - width (कंटेंट बॉक्स आकार) को padding (अंदरूनी गद्दी) से मिलाना
- मान लेना कि
widthहमेशा बॉर्डर और padding शामिल करता है —box-sizingपर निर्भर (जल्द)
सार
widthऔरheightकंटेंट बॉक्स का आकार देते हैं- स्थिर आकार के लिए
px, पैरेंट-सापेक्ष तरल चौड़ाई के लिए% min-*औरmax-*फर्श और छत सेट करते हैं- बढ़ती टेक्स्ट सामग्री के लिए
height: autoपसंद करें - प्रतिशत ऊँचाई को परिभाषित ऊँचाई वाले पैरेंट चाहिए
- पूरा बॉक्स हिसाब अगले बॉक्स-मॉडल पाठों में आता है
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी