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

Yl Wn My Sngl Sayy My Marjn Kys Shaml Kry



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

یہ بلاگ Tailwind CSS میں ایک عنصر کے ایک سائیڈ میں مارجن شامل کرنے کے لیے مثالیں دکھائے گا۔







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

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



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



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





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

” عنصر اپنے اوپری حصے میں مارجن کی 14 اکائیوں کو شامل کرنے کے لیے:

< جسم >

< div کلاس = 'h-96 mt-14 bg-purple-500' >

< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >

div >

جسم >


یہاں:



    • ' h-96 کلاس
      کنٹینر کی اونچائی کو 96 یونٹس پر سیٹ کرتی ہے۔
    • ' mt-14 ” کلاس کنٹینر کے اوپری حصے پر مارجن کی 14 اکائیوں کا اطلاق کرتی ہے۔
    • ' bg-purple-500 ” کلاس جامنی رنگ کو کنٹینر کے پس منظر پر سیٹ کرتی ہے۔

آؤٹ پٹ


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

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

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

” عنصر اپنے نچلے حصے میں مارجن کی 14 اکائیوں کو شامل کرنے کے لیے:

< جسم >

< div کلاس = 'h-96 mb-14 bg-purple-500' >

< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >

div >

جسم >


آؤٹ پٹ


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

مثال 3: ایک عنصر کے بائیں طرف مارجن شامل کریں۔

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

اس کے بائیں جانب مارجن کی 14 اکائیاں شامل کرنے کے لیے عنصر:

< جسم >

< div کلاس = 'h-96 ml-14 bg-purple-500' >

< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >

div >

جسم >


آؤٹ پٹ


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

مثال 4: ایک عنصر کے دائیں طرف مارجن شامل کریں۔

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

” عنصر اپنے دائیں طرف مارجن کی 14 اکائیوں کا اضافہ کرے گا:

< جسم >

< div کلاس = 'h-96 mr-14 bg-purple-500' >

< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >

div >

جسم >


آؤٹ پٹ


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

نتیجہ

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