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

371

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

css

— maclunian
स्रोत

14

stackoverflow.com/questions/2189452/… stackoverflow.com/questions/3060456/… stackoverflow.com/questions/4619899/… खोज से पहले तीन लिंक padding vs margin। मुझे लगता है कि हमें खोज पट्टी में तीर जोड़ने और हरे रंग बनाने की आवश्यकता है।

— लाइम

2

इससे आपको डिजीज़ोल को

— lkamal

2

यह भी जान लें कि इंटरनेट एक्सप्लोरर लगभग सभी अन्य ब्राउज़रों की तुलना में मार्जिन (बॉर्डर / पेडिंग चौड़ाई) को अलग-अलग तरीके से (डिफॉल्ट नॉन-क्विरक्स मोड में) करता है।

— डेविड आर ट्रिब्बल

1

यदि मार्जिन काम नहीं करता है, तो पैडिंग की कोशिश करें

— जोएलफैन

410

paddingसामग्री और के बीच का स्थान है border, जबकि marginसीमा के बाहर का स्थान है। यहां मुझे एक त्वरित Google खोज से मिली एक छवि है, जो इस विचार को दर्शाती है।

यहां छवि विवरण दर्ज करें

— ऐ बी सी डी
स्रोत

3

परिभाषा के लिए इन साइटों को भी देखें। लेकिन ग्राफिक एक आदर्श चित्रण है। w3schools.com/css/css_margin.asp w3schools.com/css/css_padding.asp

— सुरत

@maclunian: इसके अलावा @ Suroot के लिंक के अलावा w3schools.com/css/css_boxmodel.asp पर इस साइट को देखें।

— abcd

हालांकि यह सामग्री की चौड़ाई और ऊंचाई से संबंधित है? यह सब कहाँ पर मापा जाता है?

— Nyerguds

128

एक महत्वपूर्ण बात जो यहां के उत्तरों में गायब है:

टॉप / बॉटम मार्जिन्स पतनशील हैं।

इसलिए यदि आपके पास किसी तत्व के निचले भाग में 20px मार्जिन और अगले तत्व के शीर्ष पर 30px का मार्जिन है, तो दोनों तत्वों के बीच का अंतर 50px के बजाय 30px होगा। यह बाएं / दाएं मार्जिन या पेडिंग पर लागू नहीं होता है।

— नाथन
स्रोत

6

ध्यान दें कि बहुत विशिष्ट परिस्थितियां हैं जिनमें ऊर्ध्वाधर मार्जिन गिरता है - न कि केवल दो ऊर्ध्वाधर मार्जिन ऐसा करेंगे। जो सिर्फ इसे और अधिक भ्रमित करता है (जब तक कि आप बॉक्स मॉडल से बहुत परिचित नहीं हैं)।

— BoltClock

76

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

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

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

— LostLin
स्रोत

15

मेरा मानना है कि हर तरफ गद्दी लगाई जाती है, इसलिए तत्व 110x110px होगा

— 2013Asker

एहम, एफैड पैडिंग आपके तत्व की चौड़ाई को नहीं बदलता है अगर उस चौड़ाई को इसके अलावा किसी अन्य चीज़ पर सेट किया गया है auto। यदि चौड़ाई है auto, तो अतिरिक्त पैडिंग गद्देदार तत्व की चौड़ाई को तदनुसार बढ़ा देगा (और दोनों तरफ से, जैसा कि @ 2013Asker उल्लेख किया गया है)

— Flater

1

मुझे लगता है कि यह कहना थोड़ा भ्रामक है कि आप div 110px तक 110px होंगे क्योंकि आपके div की चौड़ाई अभी भी 100px होगी (यह मानते हुए बॉक्स-साइज़िंग को सामग्री-बॉक्स के रूप में सेट किया गया है)।

— wmock

44

इन 3 बिंदुओं को याद रखें:

मार्जिन नियंत्रण के आसपास का अतिरिक्त स्थान है ।
पैडिंग नियंत्रण के अंदर अतिरिक्त स्थान है ।
बाहरी नियंत्रण का पैडिंग एक आंतरिक नियंत्रण का मार्जिन है ।

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

— sms247
स्रोत

2

इसका जवाब नहीं है कि अंतर जानना क्यों महत्वपूर्ण है।

— GreenAsJade 3

38

सबसे सरल बचाव है; पैडिंग कंटेनर तत्व की सीमा के अंदर दी गई जगह है और मार्जिन बाहर दिया गया है। एक तत्व के लिए जो कंटेनर नहीं है, पैडिंग को बहुत अधिक समझ में नहीं आता है, लेकिन मार्जिन डिफेनेटली इसे व्यवस्थित करने में मदद करेगा।

— विंड चाइमेज़
स्रोत

30

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

— अब्दुल गफूर
स्रोत

25

गद्दी

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

हाशिया

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

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

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

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

— राकेश सिंह
स्रोत

1

किन तत्वों की सीमा नहीं है?

— सरीम जावेद खान

10

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

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

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

— पॉल
स्रोत

अधिकांश शीर्ष उत्तर तत्व और मार्जिन के "अंदर" होने के लिए पैडिंग होने का उल्लेख करते हैं, जो इसके "बाहर" होने का मतलब है, जो पहले से ही एक बड़े क्लिक क्षेत्र में योगदान करने वाले पैडिंग को दर्शाता है। यह न तो स्पष्ट है जब आप एक पूरी तरह से पारदर्शी बॉक्स के साथ काम कर रहे हैं, हालांकि है ...

— BoltClock

9

मार्जिन = चारों ओर (बाहर) सीमा के बाहर से तत्व।

पैडिंग = चारों ओर (अंदर) पाठ से सीमा तक का तत्व।

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

— robx
स्रोत

9

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

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

— MAChitgarha
स्रोत

4

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

— अर्नेस्ट फ्राइडमैन-हिल
स्रोत

2

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

— chunkyboy
स्रोत

2

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

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

<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>

— रजत
स्रोत

1

सीएसएस में मार्जिन एक संपत्ति है जिसका उपयोग सीमा के बाहर, तत्वों के आसपास रिक्त स्थान बनाने के लिए किया जाता है। प्रोग्रामर टॉप, राइट, बॉटम और लेफ्ट के लिए मार्जिन सेट कर सकता है। दूसरे शब्दों में, वह मार्जिन-टॉप, मार्जिन-राइट, मार्जिन-बॉटम और मार्जिन-लेफ्ट का उपयोग करके उन मानों को सेट कर सकता है।

मार्जिन मान निम्न प्रकार के हो सकते हैं।

सबसे पहले, ऑटो ब्राउज़र को मार्जिन की गणना करने की अनुमति देता है। इसके अलावा, लंबाई px, pt या cm में एक मार्जिन को दर्शाता है, जबकि% मार्जिन को वर्णन करने में मदद करता है जिसमें शामिल तत्व की चौड़ाई के सापेक्ष प्रतिशत है। अंत में, इनहेरिट यह दर्शाता है कि मार्जिन को मूल तत्व से विरासत में मिला है।

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

पैडिंग मान निम्न प्रकार के हो सकते हैं।

लंबाई px, pt या cm में पैडिंग का वर्णन करती है, जबकि% पैडिंग को एक प्रतिशत के रूप में दर्शाता है जिसमें शामिल तत्व की चौड़ाई है। अंत में, इनहेरिट का वर्णन है कि पैडिंग को मूल तत्व से विरासत में लिया जाना चाहिए।

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

स्निपेट का विस्तार करें

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

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

मान इसके अलावा, मार्जिन के मान ऑटो, लंबाई,% या इनहेरिट हो सकते हैं, जबकि पैडिंग के मान लंबाई,% या विरासत प्रकार हो सकते हैं। इसलिए, यह मार्जिन और पैडिंग के बीच एक और अंतर है।

संक्षेप में, सीएसएस में मार्जिन और पैडिंग दो गुण हैं जो वेब पृष्ठों को स्टाइल करने की अनुमति देता है। उन गुणों के लिए नकारात्मक मान निर्दिष्ट करना संभव नहीं है। मार्जिन और पैडिंग के बीच मुख्य अंतर यह है कि मार्जिन बॉर्डर के बाहर तत्व के आसपास जगह बनाने में मदद करता है, जबकि पैडिंग बॉर्डर के अंदर तत्व के आसपास जगह बनाने में मदद करता है।

— एवीडी प्रोग्रामर
स्रोत

0

चौड़ाई और ऊंचाई के साथ एक ब्लॉक div पर एक पृष्ठभूमि रंग डालने का प्रयास करें। आप देखेंगे कि पैडिंग तत्व के आकार को बढ़ाता है, जबकि मार्जिन इसे दस्तावेज़ के प्रवाह के भीतर ले जाता है।

मार्जिन विशेष रूप से तत्व को चारों ओर स्थानांतरित करने के लिए है।

— हेनरी
स्रोत

0

पैडिंग वेब पेज पर निकटतम घटकों के बीच का स्थान है और मार्जिन वेबपेज के मार्जिन से अंतरिक्ष है।

— प्रबेश आर.के.
स्रोत

0

एक बात जो मैंने अभी देखी है लेकिन ऊपर दिए गए उत्तरों में से कोई भी उल्लेख नहीं किया गया है। अगर मेरे पास एक गतिशील रूप से बनाया गया DOM तत्व है जो खाली इनर html कंटेंट के साथ इनिशियलाइज़ होता है, तो पैडिंग के बजाय मार्जिन का उपयोग करना एक अच्छा अभ्यास है यदि आप नहीं चाहते कि यह खाली एलिमेंट किसी भी स्थान पर कब्जा करे, सिवाय इसके कंटेंट के बनने के।

— creswei
स्रोत

-1

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

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

— अर्स
स्रोत

-1

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

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

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

— श्यामल कापरी
स्रोत

क्या आपने देखा कि यह उत्तर पहले ही दिया जा चुका है। - - और एक जोड़ा और उचित जोर के साथ?

— जेरीओल

-1

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

— विन्ह दात हा
स्रोत

-7

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

— अली मैमोन रिज़वान
स्रोत

1

मार्जिन इतना सरल नहीं है, और यह कुछ भी नहीं कहता है कि एक दर्जन से अधिक विकृत जवाब पहले ही नहीं कहा है।

— क्वेंटिन

2

आपने अभी पिछले उत्तर दोहराए हैं।

— जॉरोने पाउलो कैनामैक