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

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

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

आइए सबसे छोटी परिभाषा से शुरू करें:

• margin HTML तत्वों की सीमा के बाहर रिक्ति जोड़ता है
• padding HTML तत्वों की सीमा के अंदर रिक्ति जोड़ता है

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

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

ऊपर एक साधारण <button> है <div> . के अंदर तत्व कंटेनर।

बटन में है:

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

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

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