जब सीएसएस में मार्जिन बनाम पैडिंग का उपयोग करना है [बंद]

Question

सीएसएस लिखते समय, क्या कोई विशेष नियम या दिशानिर्देश है जो यह तय करने में उपयोग किया जाना चाहिए कि कब उपयोग करना है marginऔर कब उपयोग करना है padding?

Comments

जब आप फोकस करने योग्य क्षेत्र को बढ़ाना चाहते हैं तो टैग paddingपर उपयोग करें । <a>

— जोश हबदास

Answer 1

TL; DR: डिफ़ॉल्ट रूप से मैं हर जगह मार्जिन का उपयोग करता हूं, सिवाय इसके कि जब मेरे पास बॉर्डर या बैकग्राउंड हो और उस दृश्यमान बॉक्स के अंदर जगह बढ़ानी हो।

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

की पैडिंग के साथ एक दूसरे के ऊपर दो तत्वों पर विचार करें 1em। यह पैडिंग तत्व का हिस्सा माना जाता है और हमेशा संरक्षित होता है।

तो आप पहले तत्व की सामग्री के साथ समाप्त हो जाएंगे, उसके बाद पहले तत्व की पैडिंग, उसके बाद दूसरे की पैडिंग, उसके बाद दूसरे तत्व की सामग्री।

इस प्रकार दो तत्वों की सामग्री 2emअलग हो जाएगी।

अब उस पैडिंग को 1em मार्जिन से बदलें। मार्जिन को तत्व से बाहर माना जाता है, और आसन्न वस्तुओं का मार्जिन ओवरलैप होगा।

तो इस उदाहरण में, आप पहले तत्व की सामग्री के साथ समाप्त हो जाएंगे, उसके बाद 1emसंयुक्त तत्व के बाद दूसरे तत्व की सामग्री होगी। तो दो तत्वों की सामग्री केवल 1emअलग है।

यह वास्तव में उपयोगी हो सकता है जब आप जानते हैं कि आप 1emएक तत्व के चारों ओर रिक्ति के बारे में कहना चाहते हैं , चाहे वह किस तत्व के बगल में हो।

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

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Comments

+1 जब स्टाइलिंग टाइपोग्राफी और पैराग्राफ के असामान्य अनुक्रमों, शीर्षकों और सूचियों यह लगभग हमेशा बेहतर होता है क्योंकि आसन्न मार्जिन के ढहने वाले व्यवहार के कारण हाशिये के तत्वों को स्थान दें।

— पीट बी

ऐसा क्यों है कि ऊर्ध्वाधर मार्जिन गिर जाते हैं जबकि क्षैतिज नहीं होते हैं? वह बहुत से लोगों को भ्रमित कर सकता था

— मार्कोस परेरा

ऊर्ध्वाधर मार्जिन केवल ब्लॉक तत्वों के लिए ढहते हैं। इनलाइन ब्लॉक तत्वों के लिए मार्जिन को लंबवत और क्षैतिज रूप से जोड़ा जाता है। इसलिए मुझे यकीन नहीं है कि यह एक मुद्दा है कि क्षैतिज मार्जिन ब्लॉक तत्वों पर नहीं गिरते हैं क्योंकि वे अपने कंटेनर वैसे भी भरते हैं।

— माइक

"ऐसा क्यों है कि ऊर्ध्वाधर मार्जिन गिर जाता है जबकि क्षैतिज नहीं है?" फ्लोट्स का उपयोग किए बिना ब्लॉक तत्वों को एक-दूसरे के साथ-साथ रखने का कोई तंत्र नहीं है - जिसका मार्जिन कभी भी (यहां तक ​​कि ऊर्ध्वाधर) या पूर्ण स्थिति में नहीं गिरता है, जहां स्पष्ट रूप से कोई ढहने या इनलाइन-ब्लॉक नहीं है, जो एक अलग मॉडल का उपयोग करता है जहां इसे माना जाता है इनलाइन और सामग्री (स्थान, पाठ) महत्वपूर्ण है, या अन्य चीजें जैसे टेबल, फ्लेक्सबॉक्स, कॉलम जहां स्तंभों के बीच अंतर विशेष व्यवहार है। तो संक्षेप में कोई जगह नहीं है कि क्षैतिज मार्जिन को गिराने का उपयोग किया जा सकता है, भले ही संभव हो

— थोमसट्रैटर

आपको यह भी ध्यान रखना चाहिए कि पैडिंग कुल चौड़ाई / ऊंचाई में शामिल है, जब तत्व का उपयोग किया जाता है box-sizing: border-box;तो यदि आपके पास width: 100px; padding-left: 20px;कुल चौड़ाई 100px है, लेकिन सामग्री के लिए क्षेत्र 20px तक कम हो जाता है, इसके विपरीत box-sizing: content-box;जहां सामग्री की चौड़ाई की गणना में पैडिंग अलग है जो सामग्री-बॉक्स में आपकी कुल चौड़ाई 120px बनाता है;

— जोमार सेविजो

Answer 2

मार्जिन ब्लॉक तत्वों के बाहर की तरफ होता है जबकि अंदर की तरफ पैडिंग होता है।

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

Comments

फिर भी, सही उत्तर नीचे @pavon द्वारा है। आसन्न तत्वों का मार्जिन ओवरलैप करता है जबकि पैडिंग ओवरलैप नहीं करता है। यानी, कुल अलगाव हैpadding(A) + padding(B) + max(margin(A), margin(B))

— नेक्रोमन्ट

यहां एक अच्छा अभ्यास है: पैडिंग और मार्जिन की जांच करने के लिए ठोस लाल बॉर्डर का उपयोग करें। कभी-कभी, हम चीजों को गड़बड़ कर सकते हैं <a>, जैसे कुछ पाठ, जो पैडिंग और मार्जिन से घिरा हुआ है। हम कितनी जगह क्लिक कर सकते हैं यह जांचने के लिए इस ट्रिक का उपयोग करें।

— पी। नचन

Answer 3

सबसे अच्छा मैंने इसे उदाहरणों, आरेखों और यहां तक ​​कि 'स्वयं इसे आज़माएं' दृश्य के साथ समझाते हुए देखा है ।

नीचे दिया गया चित्र मुझे लगता है कि अंतर की तत्काल दृश्य समझ देता है।

एक बात ध्यान में रखना मानकों अनुरूप ब्राउज़र ( IE quirks एक अपवाद है ) केवल सामग्री भाग को दिए गए चौड़ाई में प्रस्तुत करते हैं, इसलिए लेआउट गणना में इस पर नज़र रखें। यह भी ध्यान दें कि बॉर्डर बॉक्स बूटस्ट्रैप 3 के साथ वापसी कर रहा है।

Comments

w3.org/TR/CSS2/box.html#box-dimensions और w3 w3.org/TR/CSS2/images/boxdim.png

— JP Hellemons

Answer 4

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

दीवार पर लटके चित्रों के ब्लॉक तत्वों की तुलना करें:

• ब्राउज़र विंडो सिर्फ दीवार की तरह है।
• सामग्री सिर्फ एक तस्वीर की तरह है।
• मार्जिन सिर्फ फंसाया चित्रों के बीच दीवार अंतरिक्ष की तरह है।
• गद्दी सिर्फ एक तस्वीर के आसपास चटाई की तरह है।
• सीमा सिर्फ एक फ्रेम पर सीमा की तरह है।

मार्जिन और पैडिंग के बीच निर्णय लेते समय, अंगूठे का एक अच्छा नियम है कि मार्जिन का उपयोग करने के लिए जब आप दीवार पर अन्य चीजों के संबंध में एक तत्व को स्थान दे रहे हैं, और जब आप तत्व की उपस्थिति को समायोजित कर रहे हैं तो पैडिंग कर सकते हैं। मार्जिन तत्व के आकार को नहीं बदलेगा, लेकिन पैडिंग आमतौर पर तत्व को ¹ बड़ा बना देगा ।

¹ इस डिफ़ॉल्ट बॉक्स मॉडल को box-sizingविशेषता के साथ बदला जा सकता है ।

Comments

वास्तव में मैं box-sizing: border-box"सामग्री के लिए जगह को छोटा बनाने" पर सहमत नहीं हूं । यहां 2 बक्से के साथ एक बेला है, जहां अगर मैंने उसी को रखा और "सक्रिय" जोड़ा, तो होवर पर "निष्क्रिय करें", इससे कोई फर्क नहीं पड़ता था कि मैं इस्तेमाल करता हूं box-sizing। यह अभी भी बॉक्स का विस्तार करेगा। मुझे सबसे लंबे समय तक पैडिंग को अधिकतम करना होगा जिससे बॉक्स का विस्तार होगा, फिर परीक्षण और त्रुटि का उपयोग करके बॉक्स में जाने वाले अन्य शब्दों के लिए एक मिलान संयोजन के साथ आ सकते हैं जो इसे प्रत्येक शब्द के लिए एक ही चौड़ाई रखेगा: jsfiddle.net / नेवीजैक्स 2 / एनक्ज़कजाह

— वाप्गुगी

हे vapcguy, आपके इनपुट के लिए धन्यवाद। मेरा कथन आम तौर पर सच है, जब किसी तत्व के लिए चौड़ाई या ऊंचाई घोषित की जाती है, जबकि अघोषित आयामों वाला एक तत्व वास्तव में प्रभावित नहीं होता है border-box(देखें: jsfiddle.net/8yravLmL/1 )। मैं भ्रम से बचने के लिए अपने उत्तर को और अधिक सूक्ष्म बना दूँगा।

— stvanrynlds

Answer 5

मार्चिंग बनाम मार्चिंग :

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

2. मार्जिन उस तत्व का हिस्सा नहीं है जहां पैडिंग तत्व का हिस्सा है।

कृपया मार्जिन बनाम पैडिंग - सीएसएस गुण से निकाली गई छवि देखें

Comments

सीमा को संदर्भित करते हुए, बल्कि अस्पष्ट है 'मार्जिन ब्लॉक तत्वों के बाहर है जबकि पैडिंग अंदर है।' बाहर / अंदर क्या? और बाहर / अंदर एक स्थिर स्थिति का सुझाव देता है, ऐसा नहीं है कि यह युक्त तत्व के आकार को प्रभावित करता है। इस जवाब ने इसे मेरे लिए स्पष्ट कर दिया।

— निकोडेमस

Answer 6

से https://www.w3schools.com/css/css_boxmodel.asp

विभिन्न भागों की व्याख्या:

• सामग्री - बॉक्स की सामग्री, जहां पाठ और चित्र दिखाई देते हैं

• पैडिंग - सामग्री के चारों ओर एक क्षेत्र को साफ करता है। पैडिंग पारदर्शी है

• सीमा - एक सीमा जो पैडिंग और सामग्री के चारों ओर जाती है

• मार्जिन - सीमा के बाहर एक क्षेत्र को साफ करता है। हाशिया पारदर्शी है

लाइव उदाहरण (मूल्यों को बदलकर खेलें): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Comments

धन्यवाद। एक तस्वीर एक हजार शब्दों के बराबर होती है!

— कैटालिट्स

Answer 7

यहाँ कुछ HTML है जो प्रदर्शित करता है कि कैसे paddingऔर क्लिक marginकरने की क्षमता को प्रभावित करता है, और पृष्ठभूमि को भरता है। किसी वस्तु को उसके गद्दी पर क्लिक प्राप्त होते हैं, लेकिन एक वस्तु पर क्लिक करने पर मार्जिन क्षेत्र उसके माता-पिता के पास जाता है।

$(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
});

.outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Comments

आप jsfiddle पर समान कोड चला सकते हैं: jsfiddle.net/fschwiet/y74Nz/3

— फ्रैंक श्वाइटरमैन

Answer 8

मार्जिन के बारे में बात यह है कि आपको तत्व की चौड़ाई के बारे में चिंता करने की आवश्यकता नहीं है।

जैसे जब आप कुछ देते हैं {padding: 10px;}, तो आपको ' फिट ' रखने के लिए तत्व की चौड़ाई को 20 गुणा कम करना होगा और इसके आसपास के अन्य तत्वों को परेशान नहीं करना होगा।

इसलिए मैं आम तौर पर सब कुछ पाने के लिए पैडिंग का उपयोग करके शुरू करता हूं packedऔर फिर मामूली चोटियों के लिए मार्जिन का उपयोग करता हूं ।

एक और बात यह है कि पैडिंग विभिन्न ब्राउज़रों पर अधिक सुसंगत हैं और IE नकारात्मक मार्जिन के साथ बहुत अच्छा व्यवहार नहीं करता है।

Answer 9

मार्जिन एक तत्व (सीमा के बाहर) के आसपास के क्षेत्र को साफ करता है, लेकिन पैडिंग किसी तत्व की सामग्री (सीमा के अंदर) के आसपास के क्षेत्र को साफ करता है।

इसका मतलब यह है कि आपके तत्व को इसके बाहरी मार्जिन के बारे में नहीं पता है, इसलिए यदि आप गतिशील वेब नियंत्रण विकसित कर रहे हैं, तो मेरा सुझाव है कि यदि आप कर सकते हैं तो पैडिंग बनाम मार्जिन का उपयोग करें।

ध्यान दें कि कुछ बार आपको मार्जिन का उपयोग करना होगा।

Answer 10

यह के बीच मतभेदों को पता करने के लिए अच्छा है marginऔर padding। यहाँ कुछ अंतर हैं:

• मार्जिन एक तत्व का बाहरी स्थान है, जबकि पैडिंग एक तत्व का आंतरिक स्थान है।

• मार्जिन एक तत्व की सीमा के बाहर का स्थान है, जबकि गद्दी इसकी सीमा के अंदर का स्थान है।

• मार्जिन ऑटो के मूल्य को स्वीकार करता है: margin: autoलेकिन आप ऑटो को पेडिंग सेट नहीं कर सकते।

• मार्जिन किसी भी संख्या में सेट किया जा सकता है, लेकिन पैडिंग गैर-नकारात्मक होना चाहिए।

• जब आप किसी तत्व को स्टाइल करते हैं, तो पैडिंग भी प्रभावित होगी (उदाहरण पृष्ठभूमि रंग), लेकिन मार्जिन नहीं।

Answer 11

ध्यान देने वाली एक बात यह है कि जब ऑटो टकराने वाले मार्जिन आपको परेशान करते हैं (और आप अपने तत्वों पर पृष्ठभूमि के रंगों का उपयोग नहीं कर रहे हैं), कुछ ऐसा है जो केवल पैडिंग का उपयोग करना आसान है।

Answer 12

उन्नत मार्जिन बनाम पैडिंग समझाया गया

paddingकिसी तत्व में अंतरिक्ष सामग्री का उपयोग करना अनुचित है ; आपको इसके बजाय बाल तत्व पर उपयोग करना चाहिए । इंटरनेट एक्सप्लोरर जैसे पुराने ब्राउज़रों ने बॉक्स मॉडल को गलत तरीके से समझा जब वह उपयोग करने के लिए आया था जो इंटरनेट एक्सप्लोरर 4 में पूरी तरह से काम करता है ।marginmargin

में दो अपवाद का उपयोग करते समय कर रहे हैं padding है उपयोग करने के लिए उपयुक्त:

1. यह एक इनलाइन तत्व पर लागू होता है जिसमें कोई भी बाल तत्व नहीं होता है जैसे कि इनपुट तत्व।

2. आप एक अत्यधिक विविध ब्राउज़र बग के लिए क्षतिपूर्ति कर रहे हैं जो एक विक्रेता * खाँसी * मोज़िला * खाँसी * को ठीक करने से इंकार करता है और निश्चित है (इस हद तक कि आप W3C और WHATWG संपादकों के साथ नियमित रूप से आदान-प्रदान करते हैं) पास एक काम करने वाला समाधान और यह समाधान होना चाहिए किसी भी अन्य की शैली को प्रभावित नहीं करेगा तो आप जिस बग की भरपाई कर रहे हैं।

जब आपके पास 100% चौड़ाई वाला तत्व आपके साथ padding: 50px;प्रभावी रूप से मिल जाए width: calc(100% + 100px);। के बाद से marginकिया गया है नहीं करने के लिए जोड़ा widthयह अप्रत्याशित लेआउट समस्याओं का कारण नहीं होगा, जब आप का उपयोग marginपरchild elements बजाय paddingसीधे तत्व पर।

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

Comments

दिलचस्प! क्या आपके पास उस विक्रेता बग के लिए एक लिंक है?

— एलेक्स एंगस

@AlexAngas होप विकिपीडिया आपके लिए काम करता है? en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

— जॉन

Answer 13

पहले देखते हैं कि अंतर क्या हैं और प्रत्येक जिम्मेदारी क्या है:

1) मार्जिन

सीएसएस मार्जिन गुणों का उपयोग तत्वों के आसपास स्थान उत्पन्न करने के लिए किया जाता है।
मार्जिन गुण सीमा के बाहर सफेद स्थान का आकार निर्धारित करते हैं। CSS के साथ, आपके पास हाशिये पर पूर्ण नियंत्रण है।
किसी तत्व के ऊपर (ऊपर, दाएं, नीचे और बाएं) के लिए मार्जिन सेट करने के लिए सीएसएस गुण हैं।

2) पैडिंग

सीएसएस पैडिंग गुण सामग्री के चारों ओर अंतरिक्ष उत्पन्न करने के लिए उपयोग किया जाता है।
पैडिंग एक तत्व की सामग्री (सीमा के अंदर) के आसपास के क्षेत्र को साफ करता है।
CSS के साथ, आप गद्दी पर पूर्ण नियंत्रण रखते हैं। किसी तत्व के शीर्ष (शीर्ष, दाएं, नीचे और बाएं) के लिए पैडिंग सेट करने के लिए सीएसएस गुण हैं।

तो बस मार्जिन तत्वों के आसपास जगह है, जबकि पैडिंग सामग्री के आसपास का स्थान है जो तत्व का हिस्सा हैं।

कोडमेन्कर्स से यह छवि दिखाती है कि मार्जिन और बॉर्डर कैसे और बॉर्डर बॉक्स और सामग्री-बॉक्स इसे कैसे अलग बनाते हैं।

इसके अलावा वे नीचे के रूप में प्रत्येक अनुभाग को परिभाषित करते हैं:

• सामग्री - यह बॉक्स के कंटेंट एरिया को परिभाषित करता है जहां टेक्स्ट, इमेज या शायद अन्य एलिमेंट जैसे वास्तविक कंटेंट रहते हैं।
• पैडिंग - यह मुख्य सामग्री को उसके बॉक्स से साफ़ करता है।
  
• सीमा - यह सामग्री और गद्दी दोनों को घेरती है।
• मार्जिन - यह क्षेत्र एक पारदर्शी स्थान को परिभाषित करता है जो इसे अन्य तत्वों से अलग करता है।

Comments

यह उत्तर कहीं और से कॉपी और पेस्ट किया गया प्रतीत होता है। "कोडमेन्कर्स" से शामिल लिंक का उत्तर से कोई लेना-देना नहीं है।

— एलेक्स एंगस

एलेक्स, तस्वीर और उत्तर का हिस्सा, जो हाइलाइट किए गए कोडमेन्कर्स से हैं, कृपया टिप्पणी छोड़ने और वोट करने से पहले चीजों के बारे में सुनिश्चित करें

— Alireza

Answer 14

मैं हमेशा इस सिद्धांत का उपयोग करता हूं:

यह फ़ायरफ़ॉक्स में निरीक्षण तत्व सुविधा से बॉक्स मॉडल है। यह प्याज की तरह काम करता है:

• आपकी सामग्री बीच में है।
• पैडिंग आपके कंटेंट और उस टैग के किनारे के बीच की जगह है जो उसके अंदर है।
• सीमा और इसके विनिर्देशों
• मार्जिन टैग के चारों ओर का स्थान है।

तो बड़े मार्जिन बॉक्स के चारों ओर अधिक जगह बनाएंगे जिसमें आपकी सामग्री होगी।

बड़ा पैडिंग आपकी सामग्री और उसके अंदर के बॉक्स के बीच की जगह को बढ़ाएगा।

यदि कोई विशिष्ट मान पर सेट है, तो न तो उनमें से बॉक्स का आकार बढ़ेगा या घटेगा।

Answer 15

हाशिया

मार्जिन का उपयोग आमतौर पर तत्व और उसके चारों ओर के बीच एक स्थान बनाने के लिए किया जाता है।

उदाहरण के लिए मैं इसका उपयोग तब करता हूं जब मैं एक नेवबार का निर्माण कर रहा होता हूं ताकि स्क्रीन के किनारों पर चिपक जाए और बिना सफेद अंतराल के।

गद्दी

मैं आमतौर पर उपयोग करता हूँ जब मैं एक सीमा के अंदर एक तत्व है, <div> या कुछ इसी तरह का उपयोग करता हूं, और मैं इसका आकार कम करना चाहता हूं, लेकिन जिस समय मैं अन्य तत्वों के बीच की दूरी या मार्जिन रखना चाहता हूं।

तो संक्षेप में, यह स्थितिजन्य है; यह इस बात पर निर्भर करता है कि आप क्या करने की कोशिश कर रहे हैं।

Answer 16

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

Comments

इस सवाल का जवाब नहीं है।

— टायलरएच

@ टायलर ने उनसे केवल इस बारे में पूछा ??? (कब मार्जिन का उपयोग करना है और कब पेडिंग का उपयोग करना है?)

— saurabhgoyal795

हां, यही उसने पूछा था। प्रत्येक का उपयोग करने के लिए यह कैसे उत्तर देता है?

— टायलरएच