Tailwind CSS میں، a مارجن مخصوص عنصر کے ارد گرد وقفہ کاری کو کنٹرول کرنے کے لیے استعمال کیا جاتا ہے۔ یہ لاگو عنصر اور اس کے آس پاس کے عناصر کے درمیان جگہ کا اضافہ کرتا ہے۔ Tailwind CSS مارجن یوٹیلیٹیز اور مارجن ویلیوز کا ایک سیٹ فراہم کرتا ہے جو صارفین کو مطلوبہ عناصر کے ارد گرد وقفہ کاری کو اپنی مرضی کے مطابق کرنے کی اجازت دیتا ہے۔ مزید برآں، صارف کسی ایک سائیڈ میں مارجن شامل کر سکتے ہیں، جیسے کہ کسی خاص عنصر کے اوپر، نیچے، بائیں یا دائیں طرف۔
یہ بلاگ Tailwind CSS میں ایک عنصر کے ایک سائیڈ میں مارجن شامل کرنے کے لیے مثالیں دکھائے گا۔
ٹیل ونڈ میں سنگل سائیڈ میں مارجن کیسے شامل کریں؟
ٹیل وِنڈ میں کسی عنصر کے ایک سائیڈ میں مارجن شامل کرنے کے لیے، درج ذیل یوٹیلیٹی کلاسز استعمال کی جا سکتی ہیں:
اسے بہتر طور پر سمجھنے کے لیے، ذیل میں دی گئی مثالوں کو دیکھیں۔
مثال 1: ایک عنصر کے اوپری حصے میں مارجن شامل کریں۔
اس مثال میں، ہم استعمال کریں گے ' mt-14 'یوٹیلٹی کلاس' میں آؤٹ پٹ مثال 2: ایک عنصر کے نیچے مارجن شامل کریں۔ اس مثال میں، ہم استعمال کریں گے ' mb-14 'کلاس میں' مثال 3: ایک عنصر کے بائیں طرف مارجن شامل کریں۔ اس مثال میں، ہم استعمال کریں گے ' ml-14 'کلاس میں' مثال 4: ایک عنصر کے دائیں طرف مارجن شامل کریں۔ اس مثال میں، ہم استعمال کریں گے ' mr-14 'کلاس میں' ٹیل ونڈ میں کسی عنصر کے ایک سائیڈ میں مارجن شامل کرنے کے لیے، مختلف یوٹیلیٹی کلاسز استعمال کی جا سکتی ہیں، جیسے کہ ' ml-
< div کلاس = 'h-96 mt-14 bg-purple-500' >
< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >
div >
جسم >
یہاں:
مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ مارجن کو کنٹینر کے اوپری حصے میں شامل کیا گیا ہے۔
< div کلاس = 'h-96 mb-14 bg-purple-500' >
< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >
div >
جسم >
آؤٹ پٹ
یہ دیکھا جا سکتا ہے کہ کنٹینر کے نچلے حصے میں مارجن شامل کر دیا گیا ہے۔
< div کلاس = 'h-96 ml-14 bg-purple-500' >
< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >
div >
جسم >
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ سے پتہ چلتا ہے کہ کنٹینر عنصر کے بائیں طرف مارجن شامل کیا گیا ہے۔
< div کلاس = 'h-96 mr-14 bg-purple-500' >
< ص کلاس = 'text-5xl ٹیکسٹ سینٹر' > مارجن میں ٹیل ونڈ سی ایس ایس ص >
div >
جسم >
آؤٹ پٹ
جیسا کہ آپ دیکھ سکتے ہیں، مارجن کو کنٹینر کے دائیں جانب مؤثر طریقے سے شامل کیا گیا ہے۔ نتیجہ