जब मैंने पहली बार HTML और CSS का उपयोग करके मार्कअप लिखना सीखना शुरू किया, तो वास्तव में मेरे दिमाग को बॉक्स मॉडल में मार्जिन और पैडिंग के बीच के अंतर के आसपास लपेटने में कुछ समय लगा। इस लेख में, मैं साझा करूंगा कि कैसे मैं आखिरकार दोनों के बीच अंतर करने में सक्षम हो गया।
मार्जिन और पैडिंग के बारे में बात करते समय, यह समीक्षा करना सबसे अच्छा है कि CSS बॉक्स मॉडल कैसे काम करता है। बॉक्स मॉडल के बारे में सोचें - जिन कंटेनरों में हम अपनी वेबसाइट के घटकों को डालते हैं - एक चित्र के रूप में जिसे चित्र फ़्रेम में रखा गया है:
सामग्री तस्वीर ही है - वह चीज जिसे हम कंटेनर में रखना चाहते हैं। इसके ठीक आसपास पैडिंग . है .
यदि हम एक फ्रेम स्टोर में होते, तो पैडिंग मैटिंग होती, जिससे बड़े पिक्चर फ्रेम की आवश्यकता होती है। जब हम CSS में पैडिंग जोड़ते हैं, तो हम कंटेनर को बड़ा करने के लिए अपने कंटेंट बॉक्स को अनिवार्य रूप से बाहर धकेल देते हैं। पैडिंग सामग्री और बॉर्डर के बीच का स्थान है।
इसके बाद आता है सीमा - यह अनिवार्य रूप से वह फ्रेम है जो हमारी सामग्री और पैडिंग को धारण करता है। मार्जिन हमारे व्यूपोर्ट (दीवार) पर आसन्न तत्वों (हमारे चित्र फ़्रेम) के बीच का स्थान है।
तो सवाल बन जाता है:हमें मार्जिन का उपयोग कब करना चाहिए और हमें पैडिंग का उपयोग कब करना चाहिए?
कुछ लोग कह सकते हैं कि इसका उत्तर थोड़ा व्यक्तिपरक है, लेकिन सामान्य तौर पर सीएसएस मार्जिन का उपयोग करना एक अच्छा विचार है यदि हम यह समायोजित करना चाहते हैं कि पृष्ठ पर अन्य तत्वों के संबंध में कोई तत्व कैसा दिखता है। पैडिंग का उपयोग तब किया जाना चाहिए जब हम चाहते हैं कि सामग्री के आसपास का स्थान बड़ा हो।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
मार्जिन और पैडिंग सेट करना
<शीर्षक>मार्जिन बनाम पैडिंग <शैली> बॉडी { बैकग्राउंड:डार्कस्लेटग्रे; चौड़ाई:100%; ऊंचाई:100 वीएच; अधिकतम-चौड़ाई:800px; प्रदर्शन:फ्लेक्स; मार्जिन:0 ऑटो; औचित्य-सामग्री:अंतरिक्ष-समान रूप से; संरेखित-आइटम:केंद्र; } #स्टार-वार्स {पृष्ठभूमि:हाथी दांत; सीमा:20px ठोस सियान; } #lotr {पृष्ठभूमि:हाथी दांत; सीमा:20px ठोस हरा; } स्टार वार्स चार्ट
हंस सोलो
ल्यूक स्काईवॉकर
ओबी वान केनोबी
Chewbacca
R2D2
C3PO
लॉर्ड ऑफ़ द रिंग्स चार्ट्स
बिल्बो
गंडालफ़
फ्रोडो
सैम
लेगोलस
अरागोर्न
उपरोक्त कोड संपादक में, मूल पृष्ठभूमि, सामग्री और बॉर्डर वाले दो बॉक्स सेट किए गए हैं। एक ऐसे परिदृश्य की कल्पना करें जहां आप चाहते हैं कि हर तरफ पैडिंग और मार्जिन अलग-अलग हों। <style> में टैग, सभी पक्षों पर विभिन्न आकारों का उपयोग करने का प्रयास करें, जैसे:
#star-wars { बैकग्राउंड:आइवरी; सीमा:20px ठोस सियान; मार्जिन-टॉप:10px; मार्जिन-बॉटम:30px; मार्जिन-बाएं:5px; मार्जिन-दाएं:25px; पैडिंग-टॉप:20px; पैडिंग-राइट:25px; पैडिंग-बॉटम:35px; पैडिंग-बाएं:45px; } #lotr {पृष्ठभूमि:हाथी दांत; सीमा:20px ठोस हरा; मार्जिन-टॉप:10px; मार्जिन-बॉटम:30px; मार्जिन-बाएं:5px; मार्जिन-दाएं:25px; पैडिंग-टॉप:20px; पैडिंग-राइट:25px; पैडिंग-बॉटम:35px; पैडिंग-बाएं:45px; }
कहा जा रहा है, एक शॉर्टहैंड है जिसका आप उपयोग कर सकते हैं:margin: 10px 25px 30px 5px; नंबर मुश्किल में हैं (TRBL):ऊपर, दाएं, नीचे और बाएं! यह वह क्रम है जो आपको न केवल मार्जिन और पैडिंग मिलेगा, बल्कि आपके बॉक्स के किनारों का वर्णन करने के लिए शॉर्टहैंड का उपयोग करने वाली कोई भी संपत्ति बहुत अधिक होगी।
सबसे अधिक संभावना है, आपके पास एक ऐसा परिदृश्य होगा जहां ऊपर और नीचे मार्जिन/पैडिंग समान होगी और बाएं और दाएं मार्जिन समान होंगे। यदि ऐसा होता है, तो आप एक शॉर्टकट का उपयोग कर सकते हैं:
#star-wars { बैकग्राउंड:आइवरी; सीमा:20px ठोस सियान; मार्जिन:20px 30px; पैडिंग:30px 20px; } #lotr {पृष्ठभूमि:हाथी दांत; सीमा:20px ठोस हरा; मार्जिन:20px 30px; पैडिंग:30px 20px;
पहली संख्या ऊपर और नीचे मार्जिन/पैडिंग है और दूसरी संख्या बाएं और दाएं मार्जिन/पैडिंग है।
यदि सभी पक्ष समान होने जा रहे हैं, तो आप बस कह सकते हैं padding: 30px; or margin: 30px;
निष्कर्ष
इस लेख में, हमने बॉक्स मॉडल के पहलुओं की समीक्षा की और चर्चा की कि मार्जिन और पैडिंग कैसे भिन्न होते हैं। याद रखें कि मार्जिन सीमा के बाहर की जगह से संबंधित है और पैडिंग सीमा के अंदर की जगह से संबंधित है। ऊपर दिए गए कोड एडिटर में कंटेनर के मार्जिन और पैडिंग के साथ खेलते रहें और आप कुछ ही समय में मार्जिन और पैडिंग सेट करने में माहिर होंगे।