यह पोस्ट वर्णन करता है:
- CSS में “पैडिंग” बनाम “मार्जिन” का उपयोग कब करें?
- CSS में “मार्जिन” का उपयोग कैसे करें?
- CSS में “पैडिंग” का उपयोग कैसे करें?
CSS में “पैडिंग” बनाम “मार्जिन” का उपयोग कब करें?
सीएसएस ' अंतर ' और ' गद्दी 'गुणों का उपयोग इंटरफ़ेस को डिज़ाइन करने के लिए किया जाता है। उनका उपयोग तत्वों के बीच अतिरिक्त अंतर या स्थान निर्दिष्ट करने के लिए भी किया जाता है। हालाँकि, कार्यक्षमता के मामले में ये दोनों गुण एक दूसरे से भिन्न हैं।
यहाँ, हम दोनों गुणों के बीच कुछ अंतरों की व्याख्या करेंगे:
| अंतर | गद्दी |
|---|---|
| मार्जिन तत्व के बाहर स्थान प्रदान करता है। | पैडिंग तत्व की सामग्री के अंदर स्थान प्रदान करता है। |
| हम एलिमेंट मार्जिन को 'के रूप में सेट कर सकते हैं' ऑटो ” स्वचालित रूप से तत्व के चारों ओर मार्जिन सेट करने के लिए। | पैडिंग को ऑटो के रूप में सेट नहीं किया जा सकता। उपयोगकर्ता को तत्व के अंदर स्थान सेट करने के लिए मान निर्दिष्ट करना होगा। |
| मार्जिन ने तत्व की शैली को प्रभावित नहीं किया है। | जब हम तत्व पर पृष्ठभूमि का रंग लागू करते हैं, तो यह तत्व की शैली को प्रभावित करेगा। |
| हम मार्जिन के रूप में सकारात्मक और नकारात्मक मान सेट कर सकते हैं। | गद्दी केवल सकारात्मक मूल्यों का समर्थन करती है। |
CSS में “मार्जिन” का उपयोग कैसे करें?
का उपयोग करने के लिए अंतर 'संपत्ति, पहले, एक' बनाएँ <दिव> ”कंटेनर और क्लास असाइन करें। उदाहरण के लिए, हमने 'नाम से वर्ग सौंपा है' लिनक्स ”। फिर, पैराग्राफ टैग में कुछ टेक्स्ट एम्बेड करें ' ':
< डिव कक्षा = 'लिनक्स' >
< पी > Linuxhint सर्वश्रेष्ठ ट्यूटोरियल वेबसाइटों में से एक है < / पी >
< / डिव >
उपर्युक्त कोड का परिणाम नीचे उल्लिखित है:
अब, एक और बनाएँ ' <दिव> 'कक्षा वाले कंटेनर' मार्जिन-डिव 'और' लागू करें शैली 'विशेषता' के रूप में बॉर्डर: 1px सॉलिड ब्लैक ”। उसके बाद, 'में कुछ पाठ जोड़ें ' टैग:
< डिव कक्षा = 'मार्जिन-डिव' शैली = 'बॉर्डर:1px सॉलिड ब्लैक' >
< पी >Linuxhint सर्वश्रेष्ठ ट्यूटोरियल वेबसाइटों में से एक है।< बीआर >
< / पी >
< डिव >
उत्पादन
अब, '.margin-div' वर्ग पर 'मार्जिन' संपत्ति लागू करें:
.margin-div {पार्श्वभूमि- रंग : आरजीबी ( 199 , 238 , 205 ) ;
फॉन्ट- आकार : मध्यम;
सीमा : 3 पीएक्स आरजीबी ( 114 , 250 , 114 ) ;
मार्जिन: 100px 100px 100px 100px;
}
उपरोक्त कोड में, ' .margin-div नीचे सूचीबद्ध गुणों को लागू करने के लिए div तत्व तक पहुँचने के लिए उपयोग किया जाता है:
- ' पीछे का रंग ” पृष्ठभूमि में रंग लगाने के लिए संपत्ति का उपयोग किया जाता है।
- ' फ़ॉन्ट आकार ” का उपयोग फ़ॉन्ट के आकार को समायोजित करने के लिए किया जाता है।
- ' अंतर 'तत्व के बाहर स्थान आवंटित करता है। उदाहरण के लिए, हमने 'मार्जिन' संपत्ति को ' 100 पीएक्स ”।
यहाँ, आप देख सकते हैं कि हमने सफलतापूर्वक सेट कर दिया है ' अंतर “दूसरे पर संपत्ति” डिव ' तत्व:
CSS में “पैडिंग” का उपयोग कैसे करें?
'पैडिंग' संपत्ति का उपयोग करने के लिए, उपरोक्त उदाहरणों का उपयोग किया गया है। क्षण में ' डिव 'कंटेनर, वर्ग का उपयोग करें' गद्दी-div पैडिंग लगाने के लिए:
< डिव कक्षा = 'लिनक्स' >< पी > Linuxhint सर्वोत्तम ट्यूटोरियल वेबसाइटों में से एक है< / पी >
< / डिव >
< डिव कक्षा = 'पैडिंग-डिव' शैली = 'बॉर्डर:1px सॉलिड ब्लैक' >
< पी >Linuxhint सर्वश्रेष्ठ ट्यूटोरियल वेबसाइटों में से एक है।< बीआर >
< / पी >
< / डिव >
उत्पादन
पैडिंग और अन्य सीएसएस गुणों को 'पर लागू करने के लिए' पैडिंग-डिव ” वर्ग, प्रदान किए गए कोड पर एक नज़र डालें:
पैडिंग-डिव {पार्श्वभूमि- रंग : आरजीबी ( 199 , 238 , 205 ) ;
फॉन्ट- आकार : मध्यम;
पैडिंग: 50px 50px 50px 50px;
}
उपर्युक्त कोड में, हमने दूसरे को एक्सेस किया ' डिव 'कक्षा का उपयोग कर तत्व' पैडिंग-डिव ”। हमने 'पृष्ठभूमि-रंग' और 'फ़ॉन्ट-आकार' सेट किया है। इसके अलावा, ' गद्दी 'संपत्ति का उपयोग तत्व सामग्री के चारों ओर प्रत्येक तरफ से स्थान जोड़ने के लिए किया जाता है' 50 पीएक्स ”।
उत्पादन
हमने CSS में “पैडिंग” और “मार्जिन” के अंतर और उपयोग की व्याख्या की है।
निष्कर्ष
सीएसएस ' अंतर ” का उपयोग तत्व के चारों ओर रिक्ति सेट करने के लिए किया जाता है, जबकि “ गद्दी ” तत्व सामग्री के चारों ओर रिक्ति जोड़ने के लिए प्रयोग किया जाता है। मार्जिन या पैडिंग गुण लागू करने के लिए, पहले एक “ डिव ”कंटेनर, और वर्ग निर्दिष्ट करें। उसके बाद, कक्षा को कक्षा के नाम से एक्सेस करें और 'लागू करें' अंतर ' और ' गद्दी ' गुण। इस पोस्ट में CSS में मार्जिन बनाम पैडिंग के उपयोग के बारे में बताया गया है।