في Tailwind CSS ، حشوة هي المسافة بين محتوى العنصر المحدد وحدوده. حشوة أفقية هي المساحة الموجودة على الجانب الأيسر والأيمن من العنصر ، بينما حشوة عمودية هي المساحة الموجودة أعلى العنصر وأسفله. تقدم Tailwind فئات أدوات مساعدة مختلفة لإضافة حشوة أفقية أو رأسية إلى العناصر المطلوبة.
ستوضح هذه المقالة:
كيف تضيف حشوة أفقية في الريح الخلفية؟
لإضافة حشوة أفقية إلى عنصر في Tailwind ، يتم استخدام فئة 'px-
بناء الجملة
< عنصر فصل = 'بكسل -0 ...' > ... عنصر >
هنا يمثل 'px' 'المحور x' أو 'المساحة المتروكة الأفقية'.
مثال: تطبيق الحشو الأفقي على عنصر HTML
في هذا المثال ، سنستخدم ' بكسل -20 فئة المرافق مع ' لإضافة حشوة رأسية إلى عنصر في Tailwind ، استخدم ' py- <قيمة> 'فئة الأداة المساعدة مع العنصر المحدد في برنامج HTML. تضيف هذه الفئة حشوة على طول المحور ص ، أي إلى الجانبين العلوي والسفلي للعنصر. بناء الجملة مثال: تطبيق الحشو العمودي على عنصر HTML في هذا المثال ، سنستخدم ' الحمر -20 فئة المرافق مع ' لإضافة المساحة المتروكة الأفقية والعمودية في Tailwind ، فإن الخيار ' بكسل- <قيمة> ' و ' py- <قيمة> ”يتم استخدام فئات الأدوات المساعدة مع العناصر المطلوبة في برنامج HTML على التوالي. يمكن للمستخدمين تحديد قيم مختلفة لتطبيق المساحة المتروكة على يسار ويمين أو أعلى وأسفل عنصر. توضح هذه المقالة الطريقة الكاملة لتطبيق المساحة المتروكة الأفقية والعمودية في Tailwind.
< جسم >
< شعبة فصل = 'bg-pink-600 px-20 w-max' >
حشوة في Tailwind CSS
شعبة >
جسم >
انتاج | 
يُظهر الإخراج أعلاه الحشو على الجانبين الأيمن والأيسر من الحاوية. يشير هذا إلى أنه تم تطبيق الحشوة الأفقية على عنصر الحاوية بنجاح. كيفية إضافة حشوة عمودية في Tailwind؟
هنا يمثل الحرف 'py' 'المحور الصادي' أو 'الحشو الرأسي'.
< شعبة فصل = 'bg-pink-600 py-20 w-max' >
حشوة في Tailwind CSS
شعبة >
جسم >
انتاج | 
يُظهر الإخراج أعلاه الحشو على الجانبين العلوي والسفلي للحاوية. يشير هذا إلى أن الحشو الرأسي قد تم تطبيقه بشكل فعال على عنصر الحاوية. خاتمة