CSS Padding

Padding, जो element के अंदर की space होती है — यानि content और border के बीच की दूरी। Padding आपके design को breathing space देता है, जिससे text या images अच्छे से दिखते हैं। चलो step-by-step इसे आसान भाषा में समझते हैं

CSS Padding क्या है?

Padding किसी element के अंदर की खाली जगह होती है। यानि content और border के बीच की space।

Box Model में Padding की जगह:

| Margin |   ←  Element के बाहर
| Border |   ←  किनारा (edge)
| Padding |   ←  अंदर की space
| Content |   ←  Text या image

मतलब: Padding content को border से दूर रखता है।

CSS Padding की Syntax

selector {
  padding: value;
}

Example

div {
  padding: 20px;
}

इससे div के अंदर हर तरफ़ 20px की खाली जगह बन जाएगी।

Padding की चार Sides

आप padding को चारों तरफ़ अलग-अलग दे सकते हैं

Example

div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

Shorthand Property — padding

आप चारों padding values को एक लाइन में भी लिख सकते हैं:

चार values (Top, Right, Bottom, Left)

div {
  padding: 10px 20px 30px 40px;
}

div {
  padding: 10px 20px 30px;
}

दो values (Top/Bottom, Right/Left)

div {
  padding: 20px 40px;
}

एक value (सभी चारों तरफ समान)

div {
  padding: 25px;
}

Example

<div class="box">Hello Padding!</div>

.box {
  background-color: lightgreen;
  border: 2px solid green;
  padding: 20px;
}

अब text border से थोड़ा अंदर रहेगा — और box बहुत सुंदर लगेगा।

Padding vs Margin

.box {
  background: lightblue;
  padding: 20px;
  margin: 20px;
}

यहाँ padding box के अंदर space देगा और margin box के बाहर दूसरी चीज़ों से distance बनाएगा।

Padding और Width का Connection

अगर आपने किसी element की width fix की है, तो padding जोड़ने पर element का actual size बढ़ जाता है। Example

div {
  width: 200px;
  padding: 20px;
}

अब total width = 200px + 20px (left) + 20px (right) = 240px 😲 इसको रोकने के लिए use करें

div {
  box-sizing: border-box;
}

अब padding width के अंदर ही count होगी, बाहर नहीं।

Units for Padding

आप padding को विभिन्न units में set कर सकते हैं:

Practical Example — Beautiful Card Design

<style>
.card {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 25px;
  width: 300px;
  margin: 20px auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>

<div class="card">
  <h2>Welcome to CSS</h2>
  <p>Padding makes your content comfortable to read!</p>
</div>

इससे एक सुंदर, संतुलित और readable card बन जाएगा।

Quick Recap

Pro Tips

Final Thoughts

CSS Padding आपके design को अंदर से सुंदर और readable बनाता है। बिना padding के content भरा-भरा और suffocated लगता है। इसलिए हमेशा padding को समझदारी से adjust करें ताकि आपकी वेबसाइट न केवल responsive बल्कि visually balanced भी दिखे।