पैडिंग यूटिलिटी
p-* से समान पैडिंग लागू करें और pt-*, pr-*, pb-*, pl-*, px-* तथा py-* से अलग-अलग किनारों को नियंत्रित करें।
पैडिंग यूटिलिटी, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
पैडिंग क्या है
पैडिंग किसी तत्व की सामग्री और उसकी सीमा के बीच का स्थान है। यह CSS बॉक्स मॉडल का हिस्सा है: प्रत्येक तत्व में सामग्री, पैडिंग, सीमा और मार्जिन की परतें होती हैं। पैडिंग तत्व के भीतर अतिरिक्त खाली स्थान देती है — बिना पैडिंग वाले बटन में पाठ किनारों से चिपका रहता है, जबकि py-2 px-4 लेबल के चारों ओर आरामदायक ऊर्ध्वाधर और क्षैतिज जगह बनाता है।
<!-- No padding: cramped -->
<button class="bg-indigo-600 text-white rounded">Submit</button>
<!-- With padding: comfortable -->
<button class="bg-indigo-600 text-white rounded py-2 px-6">Submit</button>समान पैडिंग: p-*
p-* उपयोगिता किसी तत्व की चारों दिशाओं में एक साथ समान पैडिंग लागू करती है। p-4 ऊपर, दाएँ, नीचे और बाएँ 16px निर्धारित करता है। कार्ड, मोडल और अनुभाग कंटेनरों के लिए यह सबसे सामान्य शुरुआती विकल्प है। जब किसी विरासत में मिले या डिफ़ॉल्ट स्टाइल से अनचाही स्पेसिंग जुड़ जाए, तो उसे स्पष्ट रूप से हटाने के लिए p-0 का उपयोग करें।
<div class="p-0 bg-gray-100">No padding</div>
<div class="p-2 bg-gray-200 mt-2">Compact (8px all sides)</div>
<div class="p-4 bg-gray-300 mt-2">Standard (16px all sides)</div>
<div class="p-8 bg-gray-400 mt-2">Spacious (32px all sides)</div>अक्षीय पैडिंग: px-* और py-*
क्षैतिज और ऊर्ध्वाधर अक्षों पर पैडिंग को स्वतंत्र रूप से नियंत्रित करें। px-* बाएँ और दाएँ पैडिंग जोड़ता है (CSS में padding-left और padding-right)। py-* ऊपर और नीचे पैडिंग जोड़ता है। यह बटन, नेविगेशन आइटम और पिल बैज के लिए आवश्यक है, जहाँ आप ऊर्ध्वाधर पैडिंग की तुलना में अधिक क्षैतिज पैडिंग चाहते हैं, या ऐसे अनुभागों के लिए जहाँ ऊपर/नीचे की पैडिंग बाएँ/दाएँ की पैडिंग से अलग हो।
<!-- Button: more horizontal than vertical padding -->
<button class="bg-indigo-600 text-white rounded-lg py-2 px-6 font-medium">
Get Started
</button>
<!-- Section: larger vertical than horizontal padding -->
<section class="bg-gray-50 py-16 px-6">
Section content
</section>दिशा-विशिष्ट पैडिंग: pt, pr, pb, pl
सटीक नियंत्रण के लिए अलग-अलग दिशाओं पर पैडिंग लागू करें। pt-* padding-top, pr-* padding-right, pb-* padding-bottom और pl-* padding-left है। असममित पैडिंग बनाने के लिए इन्हें अपनी आवश्यकता के अनुसार मिलाएँ। एक सामान्य स्थिति में sticky navbar के नीचे पर्याप्त जगह देने के लिए अनुभाग में अतिरिक्त ऊपरी पैडिंग जोड़ी जाती है: pt-20 (80px), 64px के navbar के साथ अतिरिक्त खाली स्थान को समायोजित करता है।
<!-- Asymmetric padding for a callout box -->
<div class="bg-yellow-50 border-l-4 border-yellow-400 pt-3 pr-4 pb-3 pl-5">
<p class="text-yellow-800">Note: extra left padding for visual offset from the border.</p>
</div>अक्षीय और दिशा-विशिष्ट पैडिंग को मिलाना
आप अक्ष और दिशा वाली यूटिलिटीज़ को मिला सकते हैं। सामान्य पैडिंग के लिए px-6 py-4 से शुरू करें, फिर किसी खास दिशा को ओवरराइड करें। उदाहरण के लिए, बाईं ओर आइकन वाले सूची आइटम में px-4 py-3 pl-12 का उपयोग किया जा सकता है — pl-12, px-4 से मिली बाईं पैडिंग को ओवरराइड करता है। इससे दाईं ओर की पैडिंग को प्रभावित किए बिना आइकन के लिए अतिरिक्त जगह बनती है।
<!-- List item with left icon space -->
<div class="relative flex items-start px-4 py-3 pl-12 hover:bg-gray-50">
<!-- Icon positioned absolutely in the left padding zone -->
<span class="absolute left-4 top-3 text-indigo-500">•</span>
<p class="text-gray-700">List item content with room for the icon</p>
</div>पैडिंग बनाम मार्जिन
एक महत्वपूर्ण अंतर: पैडिंग एलिमेंट के अंदर होती है (यह क्लिक या टैप किए जा सकने वाले क्षेत्र और पृष्ठभूमि के रंग के विस्तार को प्रभावित करती है), जबकि मार्जिन बाहर होती है (यह एलिमेंट्स के बीच जगह बनाती है)। बटन और लिंक जैसे क्लिक किए जा सकने वाले एलिमेंट्स के लिए हमेशा पैडिंग का उपयोग करें — यह क्लिक क्षेत्र और रंगीन पृष्ठभूमि वाले क्षेत्र को बड़ा करती है। एक कंपोनेंट को दूसरे से अलग रखने के लिए मार्जिन का उपयोग करें।
<!-- Padding expands the clickable area -->
<a href="#" class="bg-indigo-100 text-indigo-700 p-3 rounded">
Larger click target
</a>
<!-- Margin separates this from the next element -->
<div class="bg-white p-4 mb-4 rounded shadow">
Card 1
</div>
<div class="bg-white p-4 rounded shadow">
Card 2
</div>फ़ॉर्म एलिमेंट्स पर पैडिंग
फ़ॉर्म इनपुट्स में ऐसी पैडिंग की आवश्यकता होती है जिससे वे पढ़ने योग्य और देखने में संतुलित रहें। टेक्स्ट इनपुट्स में आमतौर पर आरामदायक टेक्स्ट फ़ील्ड के लिए px-3 py-2 या px-4 py-2.5 का उपयोग किया जाता है। रिच टेक्स्ट या खोज पट्टियों के लिए बड़े इनपुट्स में px-4 py-3 का उपयोग किया जा सकता है। इनपुट फ़ील्ड को स्पष्ट रूप से अलग दिखाने के लिए उसकी पैडिंग के साथ हमेशा rounded यूटिलिटी और border का उपयोग करें।
<input
type="text"
placeholder="Enter email"
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-gray-900
focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
/>उत्तरदायी पैडिंग
बड़े व्यूपोर्ट्स पर सेक्शन की पैडिंग आमतौर पर बढ़ जाती है। यह प्रभाव बनाने के लिए उत्तरदायी प्रीफ़िक्स का उपयोग करें। किसी कंटेनर में मोबाइल पर px-4 py-8, टैबलेट पर md:px-8 md:py-16 और डेस्कटॉप पर lg:px-16 lg:py-24 हो सकता है। खाली जगह में यह क्रमिक वृद्धि पेशेवर और खुले-खुले डेस्कटॉप लेआउट की एक प्रमुख विशेषता है।
<section class="px-4 py-8 md:px-8 md:py-16 lg:px-16 lg:py-24 bg-white">
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">
Scales with the viewport
</h2>
</section>ग्रिड और फ़्लेक्स कंटेनर्स में पैडिंग
फ़्लेक्स या ग्रिड लेआउट का उपयोग करते समय आमतौर पर कंटेनर में पैडिंग देने के बजाय बच्चों के बीच gap-* का उपयोग किया जाता है। हालांकि, कंटेनर में पैडिंग देने से उसके किनारों और अंदर मौजूद सामग्री के बीच एकसमान जगह बनती है। ग्रिड कंटेनर पर p-6 और आइटम्स के बीच gap-4 का संयोजन पूरे लेआउट में संतुलित और लगभग समान महसूस होने वाली दूरी देता है।
<div class="grid grid-cols-3 gap-4 p-6 bg-gray-100 rounded-xl">
<div class="bg-white p-4 rounded-lg shadow-sm">Item 1</div>
<div class="bg-white p-4 rounded-lg shadow-sm">Item 2</div>
<div class="bg-white p-4 rounded-lg shadow-sm">Item 3</div>
</div>व्यावहारिक: नेविगेशन आइटम की पैडिंग
नेविगेशन आइटम्स में ऐसी पैडिंग होनी चाहिए जिससे टैप करने का क्षेत्र आरामदायक रहे (ऐपल के दिशानिर्देशों के अनुसार न्यूनतम ऊंचाई 44px), और नेविगेशन देखने में बहुत फैला हुआ भी न लगे। py-2 px-4 वाला नेविगेशन लिंक लंबवत 8px और क्षैतिज 16px पैडिंग देता है। टेक्स्ट और पैडिंग से बना लिंक का दिखाई देने वाला क्षेत्र आमतौर पर टैप क्षेत्र की आवश्यकता पूरी करता है। दृश्य प्रतिक्रिया के लिए hover:bg-gray-100 rounded-lg जोड़ें।
<nav class="flex items-center gap-1 px-4 py-3 bg-white border-b">
<a href="#" class="py-2 px-4 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg">
Dashboard
</a>
<a href="#" class="py-2 px-4 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">
Settings
</a>
</nav>RTL लेआउट में तार्किक पैडिंग
दाईं से बाईं (RTL) भाषा समर्थन के लिए, Tailwind v3.3 ने तार्किक प्रॉपर्टी यूटिलिटीज़ जोड़ीं: ps-* (padding-inline-start) और pe-* (padding-inline-end)। LTR में ps-4, pl-4 के बराबर होता है। RTL में ps-4 अपने-आप pr-4 बन जाता है। दुनिया भर के उपयोगकर्ताओं के लिए सुलभ ऐप्लिकेशन बनाते समय pl-* और pr-* के बजाय ps-* और pe-* का उपयोग करें।
<!-- RTL-aware padding -->
<div class="ps-4 pe-4 py-3">
Works correctly in both LTR and RTL layouts
</div>त्वरित जाँच
इस पाठ में सिखाई गई Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: p-* चारों दिशाओं में समान पैडिंग लागू करता है, px-* और py-* क्षैतिज और लंबवत अक्षों को स्वतंत्र रूप से नियंत्रित करते हैं, और pt-*, pr-*, pb-*, pl-* असमान पैडिंग के लिए अलग-अलग दिशाओं को लक्षित करते हैं। अब हम मार्जिन यूटिलिटीज़ लागू करेंगे और सीखेंगे कि ऑटो मार्जिन क्षैतिज रूप से बीच में रखने में कैसे सक्षम बनाते हैं।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “पैडिंग यूटिलिटी” पाठ निःशुल्क है?
हाँ—“पैडिंग यूटिलिटी” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“पैडिंग यूटिलिटी” में मैं क्या सीखूँगा?
p-* से समान पैडिंग लागू करें और pt-*, pr-*, pb-*, pl-*, px-* तथा py-* से अलग-अलग किनारों को नियंत्रित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“पैडिंग यूटिलिटी” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Tailwind का स्पेसिंग पैमाना
- पैडिंग यूटिलिटी
- मार्जिन यूटिलिटी और स्वचालित मार्जिन
- ऋणात्मक मार्जिन और बीच का अंतराल