जब मैंने पहली बार HTML और CSS का उपयोग करके मार्कअप लिखना सीखना शुरू किया, तो बॉक्स मॉडल में मार्जिन और पैडिंग के बीच के अंतर को समझने में कुछ समय लगा। इस लेख में, मैं साझा करूंगा कि मैं अंततः दोनों के बीच अंतर कैसे कर पाया।
CSS बॉक्स मॉडल: एक दृश्य सादृश्य
मार्जिन और पैडिंग के बारे में बात करते समय, यह समीक्षा करना सबसे अच्छा है कि CSS बॉक्स मॉडल कैसे काम करता है। बॉक्स मॉडल को - वे कंटेनर जिनमें हम अपनी वेबसाइट के कंपोनेंट्स डालते हैं - एक तस्वीर के रूप में सोचें जिसे पिक्चर फ्रेम में रखा गया है:
- कंटेंट (Content): तस्वीर स्वयं - वह चीज़ जिसे हम कंटेनर में रखना चाहते हैं।
- पैडिंग (Padding): तस्वीर के ठीक आसपास का क्षेत्र। फ्रेम की दुकान में, पैडिंग मैटिंग होगी, जिससे बड़े पिक्चर फ्रेम की आवश्यकता होती है। जब हम CSS में पैडिंग जोड़ते हैं, तो हम अनिवार्य रूप से अपने कंटेंट बॉक्स को बाहर धकेलते हैं ताकि कंटेनर बड़ा हो जाए। पैडिंग कंटेंट और बॉर्डर के बीच की जगह है।
- बॉर्डर (Border): वह फ्रेम जो हमारे कंटेंट और पैडिंग को रखता है।
- मार्जिन (Margin): आसन्न एलिमेंट्स (हमारे पिक्चर फ्रेम्स) के बीच की जगह हमारे व्यूपोर्ट (दीवार) पर।
कब मार्जिन और कब पैडिंग उपयोग करें?
सामान्य तौर पर, CSS मार्जिन का उपयोग करना एक अच्छा विचार है यदि हम किसी एलिमेंट को पेज पर अन्य एलिमेंट्स के संबंध में कैसे दिखता है, इसे समायोजित करना चाहते हैं। पैडिंग का उपयोग तब किया जाना चाहिए जब हम कंटेंट के चारों ओर की जगह को बड़ा बनाना चाहते हैं।
मार्जिन और पैडिंग सेट करना
आप प्रत्येक तरफ अलग-अलग आकार सेट कर सकते हैं:
#star-wars {
margin-top: 10px;
margin-right: 25px;
margin-bottom: 30px;
margin-left: 5px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
इसके लिए एक शॉर्टहैंड है: margin: 10px 25px 30px 5px; - संख्याएं TRBL क्रम में हैं: टॉप, राइट, बॉटम, लेफ्ट! यह क्रम आपको न केवल मार्जिन और पैडिंग के लिए बल्कि बहुत अधिक किसी भी प्रॉपर्टी के लिए मिलेगा जो आपके बॉक्स के किनारों का वर्णन करने के लिए शॉर्टहैंड का उपयोग करता है।
सबसे अधिक संभावना है, आपके पास एक परिदृश्य होगा जहां टॉप और बॉटम मार्जिन/पैडिंग समान होंगे और लेफ्ट और राइट मार्जिन समान होंगे। यदि ऐसा होता है, तो आप एक शॉर्टकट का उपयोग कर सकते हैं:
#star-wars {
margin: 20px 30px; /* टॉप/बॉटम 20px, लेफ्ट/राइट 30px */
padding: 30px 20px; /* टॉप/बॉटम 30px, लेफ्ट/राइट 20px */
}
यदि सभी तरफ समान होने जा रहे हैं, तो आप बस कह सकते हैं padding: 30px; या margin: 30px;
निष्कर्ष
इस लेख में, हमने बॉक्स मॉडल के पहलुओं की समीक्षा की और चर्चा की कि मार्जिन और पैडिंग कैसे भिन्न हैं। याद रखें कि मार्जिन बॉर्डर के बाहर की जगह से संबंधित है और पैडिंग बॉर्डर के अंदर की जगह से संबंधित है। ऊपर दिए गए कोड एडिटर में कंटेनर्स के मार्जिन और पैडिंग के साथ खेलते रहें और आप कुछ ही समय में मार्जिन और पैडिंग सेट करने में मास्टर बन जाएंगे।
