يوفر Tailwind CSS ' هامِش 'فئات الأدوات المساعدة التي تمكن المستخدمين من التحكم في التباعد حول العناصر. ال الهامش الأفقي يضيف مساحة إلى الجانب الأيسر والأيمن من عنصر ، بينما a الهامش الرأسي يضيف مساحة إلى أعلى وأسفل عنصر. تقدم Tailwind فئات أدوات مساعدة متنوعة لإضافة هوامش أفقية أو رأسية إلى العناصر المطلوبة.
هذه المقالة سوف تمثل:
كيفية إضافة هامش أفقي في Tailwind؟
لإضافة هامش أفقي إلى عنصر في Tailwind ، فإن الخيار ' م س- <قيمة> 'فئة تستخدم مع العنصر المطلوب في برنامج HTML. يمكن للمستخدمين تحديد قيم مختلفة لحجم الهامش. تضيف هذه الفئة هامشًا بطول المحور السيني (الجانب الأيمن والأيسر).
بناء الجملة
< عنصر فصل = 'mx- <القيمة> ...' > ... عنصر >
هنا ، يمثل 'mx' 'المحور السيني' أو 'الهامش الأفقي'. تأكد من استبدال '
مثال: تطبيق الهامش الأفقي على عنصر HTML
في هذا المثال ، سنستخدم ' MX-10 فئة المرافق مع ' لإضافة هامش رأسي إلى عنصر في Tailwind ، استخدم ' بلدي- <القيمة> 'فئة الأداة المساعدة مع العنصر المحدد في برنامج HTML. تضيف هذه الفئة هامشًا بطول المحور الصادي (الجانبين العلوي والسفلي). بناء الجملة مثال: تطبيق الهامش الرأسي على عنصر HTML في هذا المثال ، سنستخدم ' بلدي 10 فئة المرافق مع ' لإضافة الهامش الأفقي والرأسي في Tailwind ، فإن الخيار ' م س- <قيمة> ' و ' بلدي- <القيمة> ”يتم استخدام فئات الأدوات المساعدة مع العناصر المطلوبة في برنامج HTML على التوالي. يمكن للمستخدمين تحديد قيم مختلفة لتطبيق الهامش على يسار ويمين أو أعلى وأسفل عنصر. لقد جسدت عملية الكتابة هذه طريقة تطبيق الهوامش الأفقية والرأسية في Tailwind.
< جسم >
< شعبة فصل = 'h-screen mx-10 bg-purple-500' >
< ص فصل = 'text-5xl مركز النص' > هامِش في Tailwind CSS ص >
شعبة >
جسم >
انتاج | 
يُظهر الإخراج أعلاه الهامش على الجانبين الأيسر والأيمن للحاوية. يشير هذا إلى أنه تم تطبيق الهامش الأفقي على عنصر الحاوية بنجاح. كيف تضيف هامشًا رأسيًا في Tailwind؟
هنا ، يمثل 'my' 'المحور y' أو 'الهامش الرأسي'. تأكد من استبدال '
< شعبة فصل = 'h-96 my-10 bg-purple-500' >
< ص فصل = 'text-5xl مركز النص' > هامِش في Tailwind CSS ص >
شعبة >
جسم >
انتاج | 
يُظهر الإخراج أعلاه الهامش إلى الجانبين العلوي والسفلي للحاوية. يشير هذا إلى أن الهامش الرأسي قد تم تطبيقه بشكل فعال على عنصر الحاوية. خاتمة