CSS पैडिंग
Margin बॉक्सों को अलग धकेलता है। अक्सर बॉक्स के अंदर भी जगह चाहिए — ताकि टेक्स्ट बॉर्डर से न चिपके और बटन आसानी से छूए जाएँ। यह अंदरूनी गद्दी padding है।
padding क्या है?
Padding तत्व की सामग्री और उसके बॉर्डर के बीच खाली जगह है। यह बॉर्डर के अंदर रहता है। padding बढ़ाएँ तो सामग्री किनारों से दूर बैठती है और बॉक्स अक्सर बड़ा होता है (जब तक बाद में box-sizing न बदलें)।
Padding बनाम margin एक नज़र में
इन दोनों को मिला देना आसान है। काम अलग रखें।
📊 Padding बनाम margin
| उपकरण | कहाँ बैठता है | रोज़ाना काम |
|---|---|---|
padding |
बॉर्डर के अंदर | टेक्स्ट गद्दी, क्लिक क्षेत्र बढ़ाना |
margin |
बॉर्डर के बाहर | इस बॉक्स को पड़ोसियों से अलग करना |
| बैकग्राउंड | आमतौर पर padding भरता है | रंग/छवि अक्सर गद्दी ढकती है |
| ऊर्ध्वाधर collapse | Padding collapse नहीं होता | ढेर ब्लॉकों के margin हो सकते हैं |
हर भुजा पर समान padding
शांत कार्ड के लिए एक लंबाई से शुरू करें।
सभी भुजाओं पर समान padding
css.card {
padding: 16px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
margin: 12px; /* बाहरी गैप — दूसरा उपकरण */
}क्या देखना चाहिए?
टेक्स्ट ग्रे बॉर्डर से दूर बैठता है। सफेद बैकग्राउंड padding क्षेत्र भी भरता है — केवल अक्षर नहीं।
दो मान — ऊर्ध्वाधर, फिर क्षैतिज
दो लंबाइयाँ विपरीत भुजाओं को जोड़ती हैं: पहले ऊपर और नीचे; फिर बाएँ और दाएँ।
ऊर्ध्वाधर फिर क्षैतिज padding
css.panel {
padding: 20px 12px;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}चार मान — ऊपर से घड़ी की दिशा
जब हर भुजा को अपनी गद्दी चाहिए: ऊपर → दाएँ → नीचे → बाएँ।
चार-भुजा padding शॉर्टकट
css.note {
padding: 8px 16px 24px 16px;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}बटन padding पसंद करते हैं
Padding आरामदायक टैप क्षेत्र बढ़ाता है बिना लेबल टेक्स्ट का आकार बदले। उदार padding वाला छोटा लेबल आधुनिक और क्लिक में आसान लगता है।
padding वाला बटन
css.btn {
padding: 0.6rem 1.25rem;
border: none;
border-radius: 8px;
background-color: #0f766e;
color: #ffffff;
}बैकग्राउंड padding भरता है
Margin (बाहर) के विपरीत, padding अभी भी तत्व के रंगे बॉक्स का हिस्सा है। बैकग्राउंड रंग या छवि आमतौर पर padding क्षेत्र ढकती है।
रंगीन padding क्षेत्र
css.banner {
padding: 24px;
background-color: #0f766e;
color: #ffffff;
border: 4px solid #042f2e;
}खुद आज़माएँ
padding: 16pxऔर दिखने वाला बॉर्डर वाला कार्ड — टेक्स्ट किनारे से चिपका नहीं।padding: 20px 12pxलिखें और ऊँची बनाम चौड़ी गद्दी देखें।- ऊर्ध्वाधर से अधिक क्षैतिज padding वाला बटन।
- बड़े padding और गहरे बॉर्डर वाला टीलग्रीन बैनर — रंग गद्दी भरता है।
- बीच में केवल
marginवाले दो कार्ड, फिर एक के अंदर केवलpadding— अलग काम महसूस करें।
आम गलतियाँ
- बॉक्स अलग करने के लिए padding (वह margin का काम है)
- उम्मीद कि भाई-बहनों के बीच padding ऊर्ध्वाधर margin की तरह collapse होगा (नहीं होता)
- भूलना कि बैकग्राउंड आमतौर पर padding क्षेत्र से होकर रंगता है
- हर भुजा पर विशाल padding जब मामूली पैमाना साफ़ लगता है
- चार मानों का क्रम गड़बड़ करना (ऊपर, दाएँ, नीचे, बाएँ)
सार
- Padding सामग्री और बॉर्डर के बीच अंदरूनी जगह है
- शॉर्टकट: 1, 2 या 4 मान (चार ऊपर से घड़ी की दिशा)
- बैकग्राउंड आमतौर पर padding क्षेत्र भरता है
- Padding ऊर्ध्वाधर margin की तरह collapse नहीं होता
- बटन और कार्ड आराम के लिए padding पर निर्भर करते हैं
- Margin बाहरी चचेरा भाई रहता है — दोनों उपकरण तेज़ रखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी