परिचय
`padding` शॉर्टहैंड प्रॉपर्टी एक साथ चारों तरफ (ऊपर, दाएं, नीचे, बाएं) पैडिंग सेट करती है।
सिंटैक्स विविधताएं
| सिंटैक्स | मान | लागू होता है |
|---|---|---|
| 1 मान | `padding: 25px;` | चारों तरफ 25px |
| 2 मान | `padding: 20px 4%` | ऊपर/नीचे 20px, दाएं/बाएं 4% |
| 3 मान | `padding: 15px 3% 10px` | ऊपर 15px, दाएं/बाएं 3%, नीचे 10px |
| 4 मान | `padding: 10px 20px 30px 40px` | ऊपर, दाएं, नीचे, बाएं (घड़ी दिशा) |
उदाहरण
<html>
<head>
<style>
.box {
border: 2px solid;
margin: 10px 0;
}
</style>
</head>
<body>
<p class="box" style="padding: 25px; border-color: orange;">
चारों तरफ 25px पैडिंग।
</p>
<p class="box" style="padding: 20px 4%; border-color: red;">
ऊपर/नीचे 20px, दाएं/बाएं 4%।
</p>
<p class="box" style="padding: 15px 3% 10px; border-color: maroon;">
ऊपर 15px, दाएं/बाएं 3%, नीचे 10px।
</p>
<p class="box" style="padding: 10px 20px 30px 40px; border-color: green;">
ऊपर 10px, दाएं 20px, नीचे 30px, बाएं 40px।
</p>
</body>
</html>
व्यक्तिगत प्रॉपर्टीज
padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; /* या लॉजिकल प्रॉपर्टीज (राइट-टू-लेफ्ट सपोर्ट) */ padding-inline-start: 20px; /* लेफ्ट (LTR) / राइट (RTL) */ padding-inline-end: 10px; /* राइट (LTR) / लेफ्ट (RTL) */ padding-block-start: 15px; /* टॉप */ padding-block-end: 5px; /* बॉटम */
बॉक्स मॉडल में पैडिंग
+--------------------------+ | Margin | | +--------------------+ | | | Border | | | | +--------------+ | | | | | Padding | | | | | | +--------+ | | | | | | | Content| | | | | | | +--------+ | | | | | +--------------+ | | | +--------------------+ | +--------------------------+
सर्वोत्तम अभ्यास
- सुसंगत स्पेसिंग के लिए डिजाइन सिस्टम स्पेसिंग स्केल उपयोग करें (4px, 8px, 16px, 24px...)
- रिस्पॉन्सिव पैडिंग के लिए `clamp()` या मीडिया क्वेरीज
- `box-sizing: border-box` सुनिश्चित करें (आधुनिक रिसेट में डिफ़ॉल्ट)
- लॉजिकल प्रॉपर्टीज (`padding-inline-start`) RTL सपोर्ट के लिए
