مساحة أفقية هي مساحة على طول المحور x بين العناصر الفرعية للحاوية المرنة أو الشبكية عندما يتم ترتيبها في صف. مساحة عمودية هي مساحة على طول المحور y بين العناصر الفرعية للحاوية المرنة أو الشبكية عندما يتم ترتيبها في عمود.
ستوضح هذه المقالة:
كيفية إضافة مسافة أفقية بين العناصر في Tailwind؟
لإضافة مسافة أفقية بين العناصر في Tailwind ، فإن الخيار ' مسافة- x- <قيمة> 'فئة تستخدم مع العنصر المطلوب في برنامج HTML. تضيف هذه الفئة مسافة بين العناصر على طول المحور السيني.
بناء الجملة
<عنصر فصل = 'مسافة- x- <القيمة> ... '> ... < / عنصر>
هنا ، تمثل 'x' 'المحور السيني' أو 'الفضاء الأفقي'. تأكد من استبدال '
مثال: تطبيق مسافة أفقية بين العناصر في Tailwind
في هذا المثال ، لدينا حاوية مرنة بها بعض العناصر الفرعية. سوف نستخدم ' الفضاء- x-8 فئة المرافق مع ' هنا ، في العنصر الأصل في عناصر الطفل انتاج | يشير الإخراج أعلاه إلى أنه تم تطبيق المسافة الأفقية بين العنصر المرن بنجاح. لإضافة مسافة عمودية بين العناصر في Tailwind ، فإن الخيار ' مسافة- y- <قيمة> 'class تستخدم مع العنصر المحدد في برنامج HTML. تضيف هذه الفئة مسافة بين العناصر على طول المحور ص. بناء الجملة هنا ، 'y' يمثل 'المحور ص' أو 'الفضاء الرأسي'. تأكد من استبدال ' مثال: تطبيق مسافة عمودية بين العناصر في Tailwind في هذا المثال ، لدينا حاوية مرنة بها بعض العناصر الفرعية في عمود. سوف نستخدم ' الفضاء- y-5 فئة المرافق مع ' هنا: انتاج | تم تطبيق الفراغ الرأسي بين العناصر المرنة بكفاءة. لإضافة المسافة الأفقية والعمودية بين العناصر في Tailwind ، فإن ' مسافة- x- <قيمة> ' و ' مسافة- y- <قيمة> ”يتم استخدام فئات الأدوات المساعدة مع العناصر المطلوبة في برنامج HTML على التوالي. تُستخدم هذه الفئات عادةً مع حاويات مرنة وشبكة للتحكم في المسافة بين العناصر الفرعية الخاصة بهم. توضح هذه المقالة طريقة تطبيق المسافة الأفقية والعمودية بين العناصر في Tailwind.
< جسم >
< شعبة فصل = 'مساحة مرنة- x-8 m-10 h-20 w-max' >
< شعبة فصل = 'bg-teal-500 w-20 p-5' > 1 < / شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5' > 2 < / شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5' > 3 < / شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5' > 4 < / شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5' > 5 < / شعبة >
< شعبة فصل = 'bg-teal-500 w-20 p-5' > 6 < / شعبة >
< / شعبة >
< / جسم >
كيفية إضافة مسافة عمودية بين العناصر في Tailwind؟
< شعبة فصل = 'مركز نص فليكس فلكس-ص-5 م -10' >
< شعبة فصل = 'bg-teal-500 p-5' > 1 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 2 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 3 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 4 < / شعبة >
< / شعبة >
< / جسم >
خاتمة