CSS Padding

Padding क्या है?

Padding किसी element के content और उसके border के बीच की space है, margin की तरह बाहर के बजाय element के अंदर बैठी हुई। Padding किसी element के total rendered size को भी बढ़ा देती है जब तक आप box-sizing: border-box इस्तेमाल न करें।

उदाहरण: What Is Padding?

<style>
.box {
  background: lightblue;
  padding: 20px;
}
</style>
<div class="box">Padding sits inside the element, around the content</div>

सभी Sides पर Padding Set करना

padding को एक single value के साथ लिखना उस exact amount की inner space को element के सभी चार sides पर एक साथ लागू करता है। margin की single-value shorthand की तरह ही, यह top, right, bottom, और left पर एक ही line में identically लागू होती है।

उदाहरण: Setting Padding on All Sides

<style>
.box {
  padding: 20px;
  background: lightblue;
}
</style>
<div class="box">Uniform padding on all four sides</div>

Individual Padding Sides

padding-top, padding-right, padding-bottom, और padding-left आपको किसी element के सिर्फ एक side की inner spacing control करने देते हैं, बाकियों से independent। margin के उलट, padding elements के बीच कभी collapse नहीं होती, क्योंकि यह उसके बाहर की space के बजाय element के अपने box का हिस्सा है।

उदाहरण: Individual Padding Sides

<style>
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  background: lightblue;
}
</style>
<div class="box">Different padding per side</div>

Padding Shorthand

padding shorthand एक declaration में सभी चार sides set करता है, और values की संख्या तय करती है कि वे कैसे लागू होती हैं। एक value सभी चार sides set करती है। दो values पहले top और bottom, फिर left और right set करती हैं। तीन values top, फिर left और right साथ में, फिर bottom set करती हैं। चार values clockwise जाती हैं, top से शुरू होकर: top, right, bottom, left।

Padding percentages भी accept करता है, जैसे padding: 5%। एक percentage parent (containing) block की width से calculate होता है, यहाँ तक कि top और bottom padding के लिए भी। किसी element से पूरी padding हटाने के लिए padding: 0 इस्तेमाल करें।

उदाहरण: Padding Shorthand

<style>
.one { padding: 20px; background: #def; }
.two { padding: 10px 30px; background: #fde; }
.three { padding: 5px 20px 15px; background: #dfd; }
.four { padding: 5px 10px 15px 20px; background: #ffd; }
</style>
<div class="one">1 value — all sides 20px</div>
<div class="two">2 values — top/bottom 10px, left/right 30px</div>
<div class="three">3 values — top 5px, sides 20px, bottom 15px</div>
<div class="four">4 values — top 5px, right 10px, bottom 15px, left 20px</div>

Padding और Box Model

Default रूप से, padding किसी element की total rendered width और height में जुड़ती है, आपने जो भी width या height set की हो उसके ऊपर। box-sizing: border-box इसे बदल देता है, इसलिए padding आपकी बताई गई width के अंदर include होती है।

उदाहरण: Padding and the Box Model

<style>
.box {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
  background: lightblue;
}
</style>
<div class="box">Padding included inside the 200px width</div>