خصائص gap CSS

التعريف والاستخدام

تعريف الخاصية الفجوة تعرف الفجوة بين الصفوف والأعمدة في مرونة، شبكة أو تخطيط أكثر من عمود. إنها اختصار للخصائص التالية:

ملاحظة:تم تغيير اسم خاصية الفجوة إلى grid-gap.

انظر أيضًا:

دليل CSSتخطيط شبكة CSS

دليل CSSتخطيط إطار التدفق المرونة CSS

دليل CSSتخطيط أكثر من عمود CSS

دليل CSSخصائص row-gap

دليل CSSخصائص column-gap

مثال

مثال 1

ضبط مسافة الصفوف والأعمدة إلى 50px:

.grid-container {
  فجوة: 50px;
}

جرب بنفسك

مثال 2: تخطيط شبكة

ضبط مسافة الصفوف إلى 20px ومسافة الأعمدة إلى 50px في تخطيط شبكة:

#grid-container {
  عرض: شبكة;
  فجوة: 20px 50px;
}

جرب بنفسك

مثال 3: تخطيط إطار التدفق المرونة

ضبط مسافة الصفوف إلى 20px ومسافة الأعمدة إلى 70px في تخطيط إطار التدفق المرونة:

#flex-container {
  عرض: مرونة;
  فجوة: 20px 70px;
}

جرب بنفسك

مثال 4: تخطيط أكثر من عمود

ضبط مسافة الأعمدة في تخطيط أكثر من عمود إلى 50px:

#newspaper {
  الأعمدة: 3;
  فجوة: 50px;
}

جرب بنفسك

جملة CSS

فجوة: row-gap column-gap|مبدئي|توريث;
القيمة وصف
row-gap ضبط حجم الفجوة بين الصفوف في شبكة أو إطار التدفق المرونة.
column-gap ضبط حجم الفجوة بين الأعمدة في شبكة، إطار التدفق المرونة أو تخطيط أكثر من عمود.
مبدئي اضبط هذا الخصائص إلى قيمته الافتراضية. يرجى الرجوع إلى: مبدئي.
توريث يورث هذا الخصائص من عنصر الأب. يرجى الرجوع إلى: توريث.

تفاصيل التقنية

القيمة الافتراضية: normale normale
التوريث: لا
صنع تحريك: يدعم. يرجى الرجوع إلى الخاصية المنفردة. يرجى الرجوع إلى:خصائص تحريك.
الإصدار: مodule الترتيب الصندوقي CSS مستوى 3
جملة JavaScript: object.style.gap="50px 100px"

دعم المتصفح

الرقم في الجدول يبين إصدار المتصفح الأول الذي يدعم هذه الخاصية بالكامل.

تخطيط Chrome IE / Edge Firefox Safari Opera
في شبكة 66 16 61 12 53
في إطار التدفق المرونة 84 84 63 14.1 70
في أكثر من عمود 66 16 61 لا يدعم 53