सीएसएस पैडिंग
किसी भी परिभाषित सीमाओं के अंदर, किसी तत्व की सामग्री के चारों ओर जगह बनाने के लिए पैडिंग का उपयोग किया जाता है।
सीएसएस पैडिंग
CSS paddingगुणों का उपयोग किसी भी परिभाषित सीमा के अंदर किसी तत्व की सामग्री के आसपास स्थान उत्पन्न करने के लिए किया जाता है।
CSS के साथ, आपका पैडिंग पर पूरा नियंत्रण होता है। तत्व के प्रत्येक पक्ष (ऊपर, दाएं, नीचे और बाएं) के लिए पैडिंग सेट करने के गुण हैं।
पैडिंग - व्यक्तिगत पक्ष
CSS में तत्व के प्रत्येक पक्ष के लिए पैडिंग निर्दिष्ट करने के गुण हैं:
padding-toppadding-rightpadding-bottompadding-left
सभी पैडिंग गुणों में निम्नलिखित मान हो सकते हैं:
- लंबाई - px, pt, cm, आदि में पैडिंग निर्दिष्ट करती है।
- % - युक्त तत्व की चौड़ाई के% में पैडिंग निर्दिष्ट करता है
- इनहेरिट - निर्दिष्ट करता है कि पैडिंग को मूल तत्व से विरासत में मिला होना चाहिए
नोट: नकारात्मक मानों की अनुमति नहीं है।
उदाहरण
<div> तत्व के सभी चार पक्षों के लिए अलग-अलग पैडिंग सेट करें:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
पैडिंग - आशुलिपि संपत्ति
कोड को छोटा करने के लिए, एक संपत्ति में सभी पैडिंग गुणों को निर्दिष्ट करना संभव है।
संपत्ति निम्नलिखित व्यक्तिगत पैडिंग गुणों के paddingलिए एक आशुलिपि संपत्ति है:
padding-toppadding-rightpadding-bottompadding-left
तो, यहां बताया गया है कि यह कैसे काम करता है:
यदि paddingसंपत्ति के चार मान हैं:
- पैडिंग: 25px 50px 75px 100px;
- शीर्ष पैडिंग 25px . है
- दायां पैडिंग 50px . है
- निचला पैडिंग 75px . है
- बायां पैडिंग 100px . है
उदाहरण
चार मानों वाली पैडिंग शॉर्टहैंड प्रॉपर्टी का इस्तेमाल करें:
div {
padding: 25px 50px 75px 100px;
}
यदि paddingसंपत्ति के तीन मान हैं:
- पैडिंग: 25px 50px 75px;
- शीर्ष पैडिंग 25px . है
- दाएं और बाएं पैडिंग 50px . हैं
- निचला पैडिंग 75px . है
उदाहरण
पैडिंग शॉर्टहैंड प्रॉपर्टी का इस्तेमाल तीन मानों के साथ करें:
div {
padding: 25px 50px 75px;
}
यदि paddingसंपत्ति के दो मान हैं:
- पैडिंग: 25px 50px;
- ऊपर और नीचे की पैडिंग 25px . है
- दाएं और बाएं पैडिंग 50px . हैं
उदाहरण
पैडिंग शॉर्टहैंड प्रॉपर्टी का इस्तेमाल दो मानों के साथ करें:
div {
padding: 25px 50px;
}
यदि paddingसंपत्ति का एक मूल्य है:
- पैडिंग: 25 पीएक्स;
- सभी चार पैडिंग 25px . हैं
उदाहरण
पैडिंग शॉर्टहैंड प्रॉपर्टी का इस्तेमाल एक मान के साथ करें:
div {
padding: 25px;
}
गद्दी और तत्व की चौड़ाई
CSS widthगुण तत्व के सामग्री क्षेत्र की चौड़ाई निर्दिष्ट करता है। सामग्री क्षेत्र एक तत्व ( बॉक्स मॉडल ) के पैडिंग, बॉर्डर और मार्जिन के अंदर का हिस्सा है ।
इसलिए, यदि किसी तत्व की एक निर्दिष्ट चौड़ाई है, तो उस तत्व में जोड़ा गया पैडिंग तत्व की कुल चौड़ाई में जोड़ा जाएगा। यह अक्सर एक अवांछनीय परिणाम होता है।
उदाहरण
यहाँ, <div> तत्व को 300px की चौड़ाई दी गई है। हालांकि, <div> तत्व की वास्तविक चौड़ाई 350px (300px + 25px बाएं पैडिंग + 25px दाएं पैडिंग) होगी:
div {
width: 300px;
padding: 25px;
}
चौड़ाई को 300px पर रखने के लिए, पैडिंग की मात्रा से कोई फर्क नहीं पड़ता, आप
box-sizingसंपत्ति का उपयोग कर सकते हैं। यह तत्व को अपनी वास्तविक चौड़ाई बनाए रखने का कारण बनता है; यदि आप पैडिंग बढ़ाते हैं, तो उपलब्ध सामग्री स्थान कम हो जाएगा।
उदाहरण
चौड़ाई 300px पर रखने के लिए बॉक्स-आकार की संपत्ति का उपयोग करें, चाहे पैडिंग की मात्रा कितनी भी हो:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
और ज्यादा उदाहरण
यह उदाहरण दर्शाता है कि <p> तत्व के बाएं पैडिंग को कैसे सेट किया जाए।
यह उदाहरण दर्शाता है कि <p> तत्व की सही पैडिंग कैसे सेट करें।
यह उदाहरण दर्शाता है कि <p> तत्व के शीर्ष पैडिंग को कैसे सेट किया जाए।
यह उदाहरण दर्शाता है कि <p> तत्व के निचले पैडिंग को कैसे सेट किया जाए।
सभी सीएसएस पैडिंग गुण
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |