tutorial - types of css




मार्जिन और पैडिंग के बीच अंतर? (14)

असल में, पृष्ठभूमि के संदर्भ में पैडिंग और मार्जिन के बीच का अंतर आता है। पैडिंग सामग्री के बीच की जगह तय करेगा, जबकि मार्जिन तत्वों के बाहरी किनारे का फैसला करेगा!

सीएसएस में मार्जिन और पैडिंग के बीच क्या अंतर है? यह वास्तव में अधिक उद्देश्य की सेवा प्रतीत नहीं होता है। क्या आप मुझे एक उदाहरण दे सकते हैं कि मतभेद कहां झूठ बोलते हैं (और अंतर जानने के लिए क्यों महत्वपूर्ण है)?


इन 3 अंक याद रखें:

  • मार्जिन नियंत्रण के चारों ओर अतिरिक्त जगह है।
  • पैडिंग नियंत्रण के अंदर अतिरिक्त जगह है
  • बाहरी नियंत्रण की पैडिंग आंतरिक नियंत्रण का मार्जिन है

डेमो छवि: (जहां लाल बॉक्स इच्छा नियंत्रण है)


एक महत्वपूर्ण अंतर है:

मार्जिन- तत्व के बाहर है यानी तत्व शुरू होने के बाद "व्हाइट" स्पेस लागू करेगा। पैडिंग- अंदर की ओर है, दूसरा तत्व शुरू होने से पहले "व्हाइट" स्पेस लागू करेगा।


किसी भी उत्तर में मार्जिन और पैडिंग के बीच महत्वपूर्ण अंतरों में से एक का उल्लेख नहीं किया गया है: क्लिकिबिलिटी और होवर डिटेक्शन

पैडिंग बढ़ाने से तत्व का प्रभावी आकार बढ़ जाता है। कभी-कभी मेरे पास एक छोटा सा आइकन होता है जिसे मैं स्पष्ट रूप से बड़ा नहीं करना चाहता हूं लेकिन उपयोगकर्ता को अभी भी उस आइकन से बातचीत करने की आवश्यकता है। मैं आइकन और पैडिंग को क्लिक और होवर के लिए एक बड़ा पदचिह्न देने के लिए बढ़ाता हूं। आइकन के मार्जिन को बढ़ाने से वही प्रभाव नहीं पड़ेगा।

इस विषय पर किसी अन्य प्रश्न का उत्तर एक उदाहरण देता है।


पैडिंग आपकी सामग्री और सीमा के बीच की जगह है। जहां मार्जिन सीमा और अन्य तत्व के बीच की जगह है।


पैडिंग डेवलपर को टेक्स्ट और उसके संलग्न तत्व के बीच स्थान बनाए रखने की अनुमति देता है। मार्जिन वह स्थान है जहां तत्व माता-पिता डॉम के किसी अन्य तत्व के साथ बनाए रखता है।

उदाहरण देखें:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

पैडिंग सीमा के अंदर की जगह है , जबकि मार्जिन सीमा के बाहर की जगह है।


मार्जिन = बाहरी सीमा से तत्व के बाहर (बाहर) स्थान।

पैडिंग = टेक्स्ट से सीमा तक तत्व के अंदर (अंदर) स्थान।

यहां देखें: http://jsfiddle.net/robx/GaMpq/


मार्जिन आपके तत्व के बाहर लागू होता है, इसलिए यह प्रभावित करता है कि आपका तत्व अन्य तत्वों से कितना दूर है।

पैडिंग आपके तत्व के अंदर लागू होती है जिससे प्रभाव पड़ता है कि सीमा से आपकी तत्व की सामग्री कितनी दूर है।

इसके अलावा, मार्जिन का उपयोग करने से आपके तत्व के आयाम प्रभावित नहीं होंगे जबकि पैडिंग आपके तत्वों के आयाम (ऊंचाई + पैडिंग सेट करें) बनायेगी, उदाहरण के लिए यदि आपके पास 5x पैडिंग के साथ 100x100px div है, तो आपका div वास्तव में 105x105px होगा


मार्जिन और पैडिंग वास्तव में पैडिंग के दोनों प्रकार हैं .... एक (मार्जिन) तत्वों की सीमा से बाहर जाता है ताकि इसे अन्य तत्वों से दूर किया जा सके और अन्य (पैडिंग) तत्वों की सीमा से सामग्री को दूर करने के लिए सामग्री सामग्री के बाहर जाता है।


मार्जिन एक तत्व की व्यक्तिगत जगह है - तत्व इसके चारों ओर के अन्य तत्वों के साथ कितना दूरी रखना चाहता है।

पैडिंग यह है कि एक तत्व स्वयं से कितना दूर है - तत्व इसके अंदर तत्वों के साथ कितना दूरी रखना चाहता है।

वे दोनों तत्वों के चारों ओर अंतराल बनाने के लिए उपयोग किए जाते हैं, लेकिन वे उस अंतर को बनाने की अपनी पद्धति में भिन्न होते हैं। मार्जिन आसन्न तत्वों को उससे दूर दबाकर अंतराल को समायोजित करता है, जबकि पैडिंग अपने आकार को बढ़ाने या इसके अंदर सामग्री के आकार को कम करके अंतर को समायोजित करता है।

डिफ़ॉल्ट रूप से, पैडिंग अंतर को समायोजित करने के लिए तत्व के आकार को बढ़ाएगा। लेकिन यदि आप तत्व पर "बॉक्स-साइजिंग: सीमा-बॉक्स" सेट करते हैं, तो यह अंतर को समायोजित करने के लिए तत्व के अंदर सामग्री के आकार को कम कर देगा।

पैडिंग का प्रयोग करें जब:

आप नहीं चाहते हैं कि आपकी सामग्री कंटेनर के किनारों को छूएं। उदाहरण: आपके पास एक गुच्छा है

एक div के अंदर तत्व और आप अंदर पाठ नहीं चाहते हैं

div की सीमा को छूने के लिए तत्व:

मार्जिन का प्रयोग करें जब:

आप किसी तत्व के चारों ओर कुछ जगह चाहते हैं, या आप नहीं चाहते कि तत्व इसके आसपास के अन्य तत्वों को छू सके:


margin और padding बीच margin बारे में जानना अच्छा होता है। जैसा की मैं जनता हूँ:

  • मार्जिन एक तत्व की बाहरी जगह है, जबकि पैडिंग एक तत्व की आंतरिक जगह है। दूसरे शब्दों में, मार्जिन तत्व की सीमा के बाहर की जगह है, जबकि पैडिंग इसकी सीमा के अंदर की जगह है।
  • आप मार्जिन पर auto वैल्यू सेट कर सकते हैं। हालांकि, इसे पैडिंग के लिए अनुमति नहीं है। इसे देखें
    नोट: margin: auto उपयोग करें margin: auto क्षैतिज रूप से अपने माता-पिता के अंदर एक ब्लॉक तत्व को केंद्र में margin: auto करने के लिए margin: auto । साथ ही, ऑटो को मार्जिन सेट करके लंबवत या क्षैतिज या दोनों फ्लेक्सबॉक्स के अंदर एक तत्व को केंद्र करना संभव है। इसे देखें
  • मार्जिन कोई भी फ्लोट नंबर हो सकता है, लेकिन पैडिंग नकारात्मक नहीं होनी चाहिए।
  • जब आप एक तत्व शैली बनाते हैं, तो पैडिंग भी स्टाइल किया जाएगा; लेकिन मार्जिन नहीं। मार्जिन मूल तत्व की शैली प्राप्त करता है। उदाहरण के लिए, जब आप background-color संपत्ति को काले background-color सेट करते हैं, तो इसकी आंतरिक जगह (यानी पैडिंग) काला होगी, लेकिन इसकी बाहरी जगह (यानी मार्जिन) नहीं होगी।

मार्जिन बॉक्स के बाहर जगह है; पैडिंग बॉक्स के अंदर जगह है। एक सफेद भरने के साथ अंतर देखना मुश्किल है, लेकिन एक रंगीन भरने के साथ आप इसे ठीक देख सकते हैं।


गद्दी

पैडिंग एक सीएसएस संपत्ति है जो तत्व सामग्री और इसकी सीमा के बीच की जगह को परिभाषित करती है (यदि इसकी सीमा है)। यदि किसी तत्व के चारों ओर एक सीमा है, तो पैडिंग उस सीमा से उस सीमा में दिखाई देने वाली तत्व सामग्री तक स्थान प्रदान करेगी। यदि किसी तत्व के चारों ओर सीमा नहीं है, तो पैडिंग जोड़ने से उस तत्व पर कोई प्रभाव नहीं पड़ता है, क्योंकि वहां से स्थान देने के लिए कोई सीमा नहीं है।

हाशिया

मार्जिन एक सीएसएस संपत्ति है जो तत्व के बाहर की जगह को उसके अगले बाहरी तत्व में परिभाषित करती है।

मार्जिन उन तत्वों को प्रभावित करता है जिनके पास दोनों सीमाएं हैं या नहीं हैं। यदि किसी तत्व की सीमा है, मार्जिन इस सीमा से अंतरिक्ष को अगले बाहरी तत्व में परिभाषित करता है। यदि किसी तत्व के पास सीमा नहीं है, तो मार्जिन तत्व सामग्री से अंतरिक्ष को अगले बाहरी तत्व में परिभाषित करता है।

पैडिंग और मार्जिन के बीच अंतर

तो मार्जिन और पैडिंग के बीच का अंतर यह है कि पैडिंग आंतरिक अंतरिक्ष से संबंधित है, मार्जिन बाहरी अंतरिक्ष के साथ अगले बाहरी तत्व से संबंधित है।







css