CSS पैडिंग

Padding element के अंदर की जगह है — उसके content और उसके border के बीच। फोटो के frame की तरह सोचिए: तस्वीर content है, frame border है, और उनके बीच का सफ़ेद mount board padding है। Padding content को साँस लेने देती है; उसके बिना text border से चिपक जाता है और भरा-भरा लगता है।

Diagram — देखें, यह सब कैसे जुड़ता है

Padding element का हिस्सा ही है, इसलिए element की पृष्ठभूमि का रंग padding वाले क्षेत्र को भी भर देता है। Padding को margin से अलग पहचानने का सबसे आसान तरीका यही है: margin border के बाहर होता है और पारदर्शी रहता है, padding border के अंदर होता है और पृष्ठभूमि दिखाता है।

चारों sides

हर side की अपनी property है: padding-top, padding-right, padding-bottom और padding-left। जब सिर्फ एक side को जगह चाहिए, तो इन्हें इस्तेमाल करें।

h1 {
  padding-top: 20px;
  padding-bottom: 10px;
}

Padding shorthand — एक line में चारों sides

एक property, padding, एक साथ चारों sides तय कर सकती है। Values की संख्या से मतलब बदलता है:

• padding: 20px; — चारों sides को 20px।
• padding: 10px 20px; — ऊपर-नीचे 10px, left-right 20px।
• padding: 10px 20px 30px; — ऊपर 10px, left-right 20px, नीचे 30px।
• padding: 10px 20px 30px 40px; — ऊपर, दाईं ओर, नीचे, बाईं ओर — ऊपर से घड़ी की दिशा में।

चार values वाला क्रम याद रखना आसान है: यह घड़ी की दिशा में चलता है, ऊपर से शुरू होकर — जैसे घड़ी की सुइयाँ।

सिंटैक्स — padding काम करते हुए

.card {
  border: 2px solid orange;
  background: lightyellow;
  padding: 20px 30px;
}
button {
  padding: 10px 24px;
}

Padding बनाम margin

Padding तब इस्तेमाल करें जब जगह को element की पृष्ठभूमि लेनी चाहिए — card, button, रंगीन banner। Margin तब इस्तेमाल करें जब दो elements के बीच खाली जगह चाहिए, जैसे दो cards के बीच का gap। अगर पक्का न हो, तो पूछिए: "क्या यह जगह रंगीन होनी चाहिए?" अगर हाँ, तो padding। अगर नहीं, तो margin।

आम गलतियाँ

• दो elements को अलग धकेलने के लिए padding इस्तेमाल करना — यह margin का काम है। Padding content को उसकी अपनी border से दूर धकेलती है।
• यह भूल जाना कि padding width में जुड़ती है। width: 200px वाला box padding: 20px के साथ पेज पर 240px चौड़ा हो जाता है (डिफ़ॉल्ट box-sizing: content-box के साथ)।
• <span> जैसे inline element पर top-bottom padding लगाना — वह रंगता तो है, पर ऊपर-नीचे वाली lines को अलग नहीं धकेलता।
• चार values वाला shorthand गलत क्रम में लिखना — यह ऊपर, दाईं ओर, नीचे, बाईं ओर है, ऊपर से घड़ी की दिशा में।

याद रखें

• Padding border के अंदर की जगह है; पृष्ठभूमि का रंग उसे भर देता है।
• Shorthand की values ऊपर से घड़ी की दिशा में चलती हैं: ऊपर, दाईं ओर, नीचे, बाईं ओर।
• दो values का मतलब है पहले vertical, फिर horizontal: padding: 10px 20px;।
• Padding element के कुल आकार में जुड़ती है, जब तक box-sizing: border-box न हो।

उदाहरण समझिए

• .menu { ... padding: 20px; } — पूरे मेनू card को अपनी border के अंदर चारों तरफ 20px जगह मिलती है, इसलिए heading और items कभी नारंगी border को छूते नहीं।
• .item { ... padding: 10px 15px; } — हर मेनू item को ऊपर-नीचे 10px और left-right 15px जगह मिलती है, इसलिए text अपने सफ़ेद box के अंदर आराम से बैठता है।
• .item पर margin-bottom: 10px; — यह margin है, padding नहीं: यह दो मेनू items के बीच की खाली जगह है, उनकी borders के बाहर।
• .price { ... padding: 4px 10px; } — offer वाली line एक छोटी strip है, इसलिए उसे थोड़ी ही padding चाहिए: ऊपर-नीचे 4px, left-right 10px।
• .menu पर background: #fffbeb; — हल्का पीला रंग padding को भी भर देता है, जिससे दिखता है कि padding element के अंदर है।