خاصية التباعد Gap
آخر تحديث: 2026-09-13
gap خاصية التباعد Gap
تضبط خاصية gap التباعد بين الصفوف والأعمدة في تخطيطات flex و grid. وهي اختصار لـ row-gap و column-gap. ولا يضيف gap مساحة إلا بين العناصر وليس على حواف الحاوية، مما يجعله أنظف وأكثر قابلية للتنبؤ من الهوامش. فهو يزيل مشقة مسح الهوامش الأولى والأخيرة في التباعد التقليدي المعتمد على margin.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
gap: normal | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | كلمة مفتاحية | التباعد الافتراضي |
<length> | <percentage> | النوع | تباعد الصفوف والأعمدة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| gap | ✓ v66 | ✓ v16 | ✓ v61 | ✓ v10.1 | ✓ v53 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يقابل قيمتا gap كلًا من row-gap و column-gap: gap: 10px 20px يعني 10px بين الصفوف و20px بين الأعمدة. وتنطبق قيمة واحدة على كلاهما.
مهم： لا يعمل gap إلا في تخطيطات flex و grid؛ ولا تأثير له في تخطيط الكتلة العادي. استخدم margin عند الحاجة إلى تباعد بين عناصر الكتلة.
❓ الأسئلة الشائعة
Qما الفرق بين gap و margin؟
Aلا يُنشئ gap مساحة إلا بين العناصر ولا يضيف مساحة على حواف الحاوية، لذا لا يوجد فجوة أولى أو أخيرة لتنظيفها. أما margin فيُنشئ مساحة على جميع جوانب العنصر، فتحتاج الهوامش الأولى والأخيرة إلى معالجة خاصة، وقد تتداخل الهوامش مع حسابات التحجيم في flex أو grid. ويفضَّل gap للتباعد الداخلي للتخطيط، ويُترك margin للتباعد بين العنصر والأشياء خارجه.
Qكيف هو دعم المتصفحات لـ gap؟
Aفي تخطيطات flex، يُدعم gap بالكامل بدءًا من Chrome 84 و Firefox 63 و Safari 14.1؛ وفي تخطيطات grid، كان مدعومًا منذ وقت أبكر بكثير (Chrome 66+ و Safari 12+). وتُدعم أيضًا القيم المئوية وتُحل بالنسبة لحجم الحاوية. ولدعم المتصفحات الأقدم، نفّذ أولًا التباعد باستخدام margin كحل احتياطي، ثم استخدم استعلام الميزة @supports (gap: 1px) للتبديل إلى الصيغة الجديدة.
Qما الفرق بين gap و grid-gap، ولماذا يُوصى بـ gap الآن؟
Aكان grid-gap الصيغة المبكرة التي تُطبَّق فقط على grid، إلى جانب grid-row-gap و grid-column-gap. لاحقًا وسّعت المواصفات gap ليشمل تخطيطات flex و grid ومتعدد الأعمدة وأعادت تسمية الخاصية. وأصبح gap الآن اختصارًا لـ row-gap و column-gap، وتظل هذه الخصائص المستقلة صالحة ومفيدة quando يحتاج اتجاه واحد فقط إلى قيمة مخصصة. كل المتصفحات الحديثة تدعم gap؛ و grid-gap هو الصيغة القديمة، لذا يجب أن يستخدم الكود الجديد gap.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
