ٹیل ونڈ میں ایک سائیڈ پر پیڈنگ کیسے شامل کریں؟

Yl Wn My Ayk Sayy Pr Py Ng Kys Shaml Kry



Tailwind CSS میں، پیڈنگ کا استعمال مخصوص عنصر کے مواد اور اس کی سرحدوں کے درمیان جگہ شامل کرنے کے لیے کیا جاتا ہے۔ یہ عنصر کے اندر اضافی وقفہ کاری کا اضافہ کرتا ہے۔ ٹیل ونڈ سی ایس ایس پیڈنگ یوٹیلیٹیز اور پیڈنگ ویلیوز کا ایک سیٹ فراہم کرتا ہے جو صارفین کو مطلوبہ عناصر کے وقفہ کو اپنی مرضی کے مطابق کرنے کی اجازت دیتا ہے۔ مزید برآں، صارف پیڈنگ کو ایک طرف، جیسے کہ کسی خاص عنصر کے اوپر، نیچے، بائیں یا دائیں میں شامل کر سکتے ہیں۔

یہ بلاگ Tailwind CSS میں ایک عنصر کے ایک طرف پیڈنگ شامل کرنے کی مثالوں کو ظاہر کرے گا۔







ٹیل ونڈ میں ایک سائیڈ پر پیڈنگ کیسے شامل کریں؟

ٹیل ونڈ میں کسی عنصر کے ایک طرف پیڈنگ شامل کرنے کے لیے، درج ذیل یوٹیلیٹی کلاسز استعمال کی جا سکتی ہیں:



اسے بہتر طور پر سمجھنے کے لیے، ذیل میں دی گئی مثالوں کو دیکھیں۔



مثال 1: ایک عنصر کے اوپری حصے میں پیڈنگ شامل کریں۔





اس مثال میں، ہم استعمال کریں گے ' pt-10 'یوٹیلٹی کلاس' میں

” عنصر اس کے اوپری حصے میں پیڈنگ کے 10 یونٹس شامل کرنے کے لیے:

< جسم >

< div کلاس = 'bg-pink-600 pt-10 w-max' >
پیڈنگ میں ٹیل ونڈ سی ایس ایس
div >

جسم >


آؤٹ پٹ




مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ پیڈنگ کو کنٹینر کے اوپری حصے میں شامل کیا گیا ہے۔

مثال 2: ایک عنصر کے نیچے پیڈنگ شامل کریں۔

اس مثال میں، ہم استعمال کریں گے ' pb-10 'کلاس میں'

اس کے نیچے پیڈنگ کی 10 یونٹس شامل کرنے کے لیے عنصر

< جسم >

< div کلاس = 'bg-pink-600 pb-10 w-max' >
پیڈنگ میں ٹیل ونڈ سی ایس ایس
div >

جسم >


آؤٹ پٹ


یہ دیکھا جا سکتا ہے کہ کنٹینر کے نچلے حصے میں پیڈنگ شامل کر دی گئی ہے۔

مثال 3: ایک عنصر کے دائیں طرف پیڈنگ شامل کریں۔

اس مثال میں، ہم استعمال کریں گے ' pr-10 'کلاس میں'

اس کے دائیں طرف پیڈنگ کی 10 یونٹس شامل کرنے کے لیے عنصر:

< جسم >

< div کلاس = 'bg-pink-600 pr-10 w-max' >
پیڈنگ میں ٹیل ونڈ سی ایس ایس
div >

جسم >


آؤٹ پٹ


مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ پیڈنگ کو کنٹینر عنصر کے دائیں طرف شامل کیا گیا ہے۔

مثال 4: ایک عنصر کے بائیں جانب پیڈنگ شامل کریں۔

اس مثال میں، ہم استعمال کریں گے ' pl-10 'کلاس میں'

اس کے بائیں جانب پیڈنگ کے 10 یونٹس شامل کرنے کے لیے عنصر:

< جسم >

< div کلاس = 'bg-pink-600 pl-10 w-max' >
پیڈنگ میں ٹیل ونڈ سی ایس ایس
div >

جسم >


آؤٹ پٹ


یہ دیکھا جا سکتا ہے کہ کنٹینر کے بائیں جانب پیڈنگ شامل کی گئی ہے۔

نتیجہ

ٹیل ونڈ میں کسی عنصر کے ایک طرف پیڈنگ شامل کرنے کے لیے، مختلف یوٹیلیٹی کلاسز استعمال کی جا سکتی ہیں، جیسے کہ ' pl- '،' pr- '،' pt- '، اور ' pb- ' یہ کلاسیں مخصوص عنصر کے بائیں، دائیں، اوپر اور نیچے کی طرف بالترتیب پیڈنگ شامل کرتی ہیں۔ صارفین پیڈنگ کے سائز کے لیے مختلف اقدار کی وضاحت کر سکتے ہیں۔ اس بلاگ نے Tailwind CSS میں ایک عنصر کے ایک طرف پیڈنگ شامل کرنے کی مثالیں دکھائی ہیں۔