ٹیل ونڈ میں افقی اور عمودی پیڈنگ کیسے شامل کریں؟

Yl Wn My Afqy Awr Mwdy Py Ng Kys Shaml Kry



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

یہ مضمون وضاحت کرے گا:







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

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



نحو



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


یہاں 'px' 'x-axis' یا 'افقی پیڈنگ' کی نمائندگی کرتا ہے۔





مثال: HTML عنصر پر افقی پیڈنگ لگانا

اس مثال میں، ہم استعمال کریں گے ' px-20 'یوٹیلٹی کلاس' کے ساتھ

اس میں افقی پیڈنگ شامل کرنے کے لیے عنصر:



< جسم >

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

جسم >


آؤٹ پٹ


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

Tailwind میں عمودی پیڈنگ کیسے شامل کریں؟

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

نحو

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


یہاں 'py' 'y-axis' یا 'عمودی پیڈنگ' کی نمائندگی کرتا ہے۔

مثال: HTML عنصر پر عمودی پیڈنگ کا اطلاق کرنا

اس مثال میں، ہم استعمال کریں گے ' py-20 'یوٹیلٹی کلاس' کے ساتھ

اس میں عمودی پیڈنگ شامل کرنے کے لیے عنصر:

< جسم >

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

جسم >


آؤٹ پٹ


مندرجہ بالا آؤٹ پٹ کنٹینر کے اوپر اور نیچے کی طرف پیڈنگ کو دکھاتا ہے۔ اس سے ظاہر ہوتا ہے کہ کنٹینر کے عنصر پر عمودی پیڈنگ کو مؤثر طریقے سے لاگو کیا گیا ہے۔

نتیجہ

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