CSS में मार्जिन बनाम पैडिंग - अंतर क्या है?

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

मार्जिन बनाम पैडिंग

सबसे छोटी परिभाषा से शुरू करते हैं:

• margin HTML एलिमेंट्स के बॉर्डर के बाहर स्पेस जोड़ता है
• padding HTML एलिमेंट्स के बॉर्डर के अंदर स्पेस जोड़ता है

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

उपरोक्त अवधारणात्मक चित्र को ध्यान में रखते हुए, आइए इस ज्ञान को एक वास्तविक HTML एलिमेंट पर लागू करें।

ऊपर एक साधारण <button> एलिमेंट है जो <div> कंटेनर के अंदर है।

बटन में:

• 24px मार्जिन जो बटन के चारों ओर स्पेस जोड़ता है और इसे पैरेंट एलिमेंट के बॉर्डर से दूर धकेलता है।
• 4px बॉर्डर
• 16px पैडिंग जो बटन के बॉर्डर और उसके कंटेंट के बीच स्पेस जोड़ता है।
• कंटेंट (इस मामले में, टेक्स्ट लेबल: Button)

button { padding: 16px; margin: 24px; border: 4px solid #282828; }

margin और padding दोनों प्रॉपर्टीज़ व्हाइटस्पेस को नियंत्रित करती हैं। हालांकि, वे इसे लागू करने के मामले में विपरीत कार्य करती हैं।