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

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

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .outer-div {
      border: 2px solid purple;
      width: 300px; height: 200px;
    }
    .inner-div {
      border: 2px solid green;
      margin: 20px; padding-left: 20px;
    }
  </style>
</head>
<body>
  <h1>Margin and padding example</h1>
  <div class="outer-div">
    <div class="inner-div">
      Some sample text inside the inner div which will be padded by 20px all sides.
    </div>
  </div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• margin: 20px - आंतरिक डिव को बाहरी डिव से 20px दूर धकेलता है
• padding-left: 20px - टेक्स्ट को बाएं बॉर्डर से 20px अंदर ले जाता है
• बॉर्डर विज़ुअलाइज़ेशन - बैंगनी (बाहरी), हरा (आंतरिक) सीमाएं स्पष्ट करती हैं
• बॉक्स मॉडल - कंटेंट → पैडिंग → बॉर्डर → मार्जिन