CSS Padding Property का उपयोग किसी Element की सामग्री के चारों ओर, किसी भी निर्धारित बॉर्डर के अंदर, जगह बनाने के लिए किया जाता है।
CSS के साथ, आपके पास पैडिंग पर पूरा नियंत्रण होता है। किसी Element के प्रत्येक साइड (Top, Right, Bottom and Left) के लिए पैडिंग सेट करने के लिए प्रॉपर्टी होते हैं, और एक ही Declaration में सभी पैडिंग प्रॉपर्टी को सेट करने के लिए एक Shorthand Property भी होती है।
Padding – Individual Sides
CSS में किसी Element की प्रत्येक Side के लिए पैडिंग निर्दिष्ट करने के निम्न गुण होते हैं:
padding-top– एलेमेन्ट के टॉप साइड पैडिंग सेट करने के लिएPadding-right– एलेमेन्ट के राइट साइड मे पैडिंग सेट करने के लिएPadding-bottom– एलेमेन्ट के नीचे साइड पैडिंग सेट करने के लिएPadding-left– एलेमेन्ट के लेफ्ट साइड मे पैडिंग सेट करने के लिए
Padding Property Values
सभी पैडिंग प्रॉपर्टी में निम्नलिखित वैल्यू हो सकते हैं:
- length – px, pt, cm, आदि में पैडिंग निर्दिष्ट करता है
- percent – % मे पैडिंग निर्दिष्ट करता है
- inherit – निर्दिष्ट करता है कि पैडिंग को पैरेंट एलेमेन्ट से इनहेरिट किया जाना चाहिए
नोट – पैडिंग प्रॉपर्टी में निगेटिव वैल्यू सेट करने की अनुमति नहीं है।
Example
Set different padding for all four sides of a <p> element:
p {
padding-top: 30px;
padding-right: 100px;
padding-bottom: 30px;
padding-left: 80px;
background-color: pink;
}
उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा-
This is example of different side paddings. top padding 30px, right padding 100px, bottom padding 30px and left padding 80px
Padding – Shorthand Property
कोड को छोटा करने के लिए, सभी पैडिंग प्रॉपर्टी को एक ही Declaration में निर्दिष्ट करना संभव है, जिसमे प्रत्येक प्रॉपर्टी का मतलब निम्न तरह है।
Example
Use the padding shorthand property with four values:
p{
padding: 30px 40px 60px 50px;
}
उपरोक्त declaration मे सभी वैल्यू का मतलब इस प्रकार है-
- top padding is 30px
- right padding is 40px
- bottom padding is 60px
- left padding is 50px
यदि पैडिंग प्रॉपर्टी की तीन वैल्यू निर्दिष्ट की जाती हैं, तो इसका मतलब इस प्रकार है।
padding: 30px 40px 50px;
- top padding is 30px
- right and left paddings are 40px
- bottom padding is 50px
यदि पैडिंग प्रॉपर्टी की दो वैल्यू निर्दिष्ट की जाती हैं तो-
padding: 30px 50px;
- top and bottom padding is 30px
- right and left padding is 50px
यदि पैडिंग प्रॉपर्टी की केवल एक वैल्यू निर्दिष्ट की जाती हैं तो-
padding: 30px;
- all sides padding set to 30px
This is example of equal side padding. top padding 30px, right padding 30px, bottom padding 30px and left padding 30px
Padding and Element Width
CSS Width Property Element के कंटेन्ट एरिया की चौड़ाई निर्दिष्ट करता है। कंटेन्ट एरिया Element padding, Border and Margin (Box Model) के अंदर का भाग होता है। इसलिए, यदि किसी Element की चौड़ाई निर्दिष्ट है, तो उस Element में जोड़ा गया पैडिंग Element की कुल चौड़ाई में जुड़ जाएगा। यह अक्सर एक अवांछनीय परिणाम होता है।
Example 1
Here, the <div> element is given a width of 200px.
div {
width: 200px;
border: 1px solid black;
}
Example 2
Here, the <div> element is given a width of 200px and padding 50px. However, the actual width of the <div> element will be 300px (200px + 50px of left padding + 50px of right padding):
div {
width: 200px;
padding: 50px;
border: 1px solid black;
}
Padding and box-sizing
box-sizing प्रॉपर्टी यह निर्धारित करता है कि किसी तत्व की चौड़ाई और ऊँचाई की गणना कैसे की जाती है: क्या उनमें पैडिंग और बॉर्डर शामिल होने चाहिए या नहीं। box-sizing प्रॉपर्टी के निम्नलिखित मान हो सकते हैं:
content-box -यह डिफ़ॉल्ट है। चौड़ाई और ऊँचाई प्रॉपर्टी में केवल कंटेंट शामिल होता है, बॉर्डर और पैडिंग शामिल नहीं होता है।border-box -चौड़ाई और ऊँचाई प्रॉपर्टी में कंटेंट, पैडिंग और बॉर्डर शामिल होते हैं।
इसलिए, चौड़ाई को 200px पर बनाए रखने के लिए, चाहे पैडिंग कितनी भी हो, आप box-sizing: border-box; का इस्तेमाल कर सकते हैं। इससे एलिमेंट अपनी वास्तविक चौड़ाई बनाए रखता है; अगर आप पैडिंग बढ़ाते हैं, तो उपलब्ध कंटेंट स्पेस कम हो जाएगा।
CSS Code : Example 1
Use the box-sizing property to keep the width at 200px, no matter the amount of padding:
h2 {
width: 200px;
padding: 20px;
box-sizing: border-box;
}
CSS Code : Example 2
h2 {
width: 200px;
padding: 20px;
box-sizing: content-box;
}
HTML Code
<body>
<div><h2>"An investment in knowledge pays the best interest." - Benjamin Franklin</h2></div>
</body>
उपरोक्त Example 1 का आउटपुट निम्न प्रकार होगा –
An investment in knowledge pays the best interest.
उपरोक्त Example 2 का आउटपुट निम्न प्रकार होगा –
An investment in knowledge pays the best interest.
The Inherit Value
पैडिंग प्रॉपर्टी को Inherit सेट करने से पैडिंग पैरेंट एलिमेंट से Inherit हो जाता है। निम्न उदाहरण <p> एलिमेंट की पैडिंग को पैरेंट एलिमेंट <div> की पैडिंग के अनुसार Inherit कर दिया जाएगा।
Example
Use of the inherit value:
CSS Code
div {
border: 1px solid black;
padding: 20px;
}
p.div {
padding: inherit;
border: 1px solid black;
}
HTML Code
<body>
<div>
<p>This paragraph element inherited by parent div element.</p>
</div>
</body>
उपरोक्त उदाहरण का आउटपुट निम्न प्रकार होगा –
This paragraph element inherited by parent div element.