Tailwind میں تمام اطراف میں پیڈنگ کیسے شامل کریں؟

Tailwind My Tmam Atraf My Py Ng Kys Shaml Kry



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

یہ مضمون Tailwind میں کسی عنصر کے تمام اطراف میں پیڈنگ شامل کرنے کے طریقہ کار کی مثال دے گا۔







Tailwind میں تمام اطراف میں پیڈنگ کیسے شامل کریں؟

Tailwind میں کسی خاص عنصر کے تمام اطراف میں پیڈنگ شامل کرنے کے لیے، ایک HTML ڈھانچہ بنائیں۔ پھر، مخصوص عنصر کے ساتھ 'p-' یوٹیلیٹی کلاس استعمال کریں۔ کسی عنصر پر پیڈنگ لگانے کے لیے مطلوبہ قدر کی وضاحت کرنا ضروری ہے۔ اگلا، تبدیلیوں کو یقینی بنانے کے لیے HTML ویب صفحہ دیکھیں۔



نحو



< عنصر کلاس = 'p-' ... عنصر >


'' کو کسی بھی مطلوبہ نمبر سے بدل دیں، جیسے 2، 4، 12، 20، وغیرہ۔





مثال

اس مثال میں، ہمارے پاس دو ہیں '

' عناصر اور ہم دو مختلف پیڈنگز کا اطلاق کریں گے یعنی ' p-8 'اور' p-14 ' ان پر:



< جسم >

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

< بی آر >

< div کلاس = 'bg-teal-600 p-14 w-max' >
پیڈنگ میں ٹیل ونڈ سی ایس ایس
div >

جسم >


یہاں، پہلے

میں:

    • ' bg-pink-600 کلاس گلابی رنگ کو
      عنصر کے پس منظر پر سیٹ کرتی ہے۔
    • ' p-8 کلاس کنٹینر کے تمام اطراف میں پیڈنگ کی 8 اکائیوں کو شامل کرتی ہے۔
    • ' w-max کلاس
      عنصر کی چوڑائی کو اس کے مواد کی زیادہ سے زیادہ چوڑائی پر سیٹ کرتی ہے۔

دوسری

میں:

    • ' bg-teal-600 کلاس
      عنصر کے پس منظر میں نیلے رنگ کو سیٹ کرتی ہے۔
    • ' p-14 کلاس کنٹینر کے تمام اطراف میں پیڈنگ کی 14 یونٹس کا اطلاق کرتی ہے۔
    • ' w-max کلاس
      عنصر کی چوڑائی کو اس کے مواد کی زیادہ سے زیادہ چوڑائی پر سیٹ کرتی ہے۔

آؤٹ پٹ


مندرجہ بالا آؤٹ پٹ کے مطابق، مخصوص پیڈنگ دونوں کنٹینرز کے تمام اطراف پر لاگو کیا گیا ہے.

نتیجہ

ٹیل ونڈ میں کسی عنصر کے تمام اطراف میں پیڈنگ شامل کرنے کے لیے، 'p-' یوٹیلیٹی کلاس کو HTML پروگرام میں مطلوبہ عنصر کے ساتھ استعمال کیا جاتا ہے۔ صارفین کو کسی عنصر پر پیڈنگ لگانے کے لیے مخصوص قدر کی وضاحت کرنے کی ضرورت ہے۔ تصدیق کے لیے، HTML ویب صفحہ دیکھیں اور تبدیلیوں کو یقینی بنائیں۔ اس مضمون نے ٹیل ونڈ میں کسی عنصر کے تمام اطراف میں پیڈنگ شامل کرنے کے طریقہ کار کی مثال دی ہے۔