خاصية column-gap
آخر تحديث: 2026-09-13
column-gap خاصية column-gap
تحدد خاصية column-gap المسافة بين الأعمدة في تخطيط متعدد الأعمدة. وبصفتها جزءًا رئيسيًا من تخطيط CSS متعدد الأعمدة، فإن المسافة الجيدة الاختيار تحسّن بشكل ملحوظ قابلية قراءة النص متعدد الأعمدة ومظهره.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
column-gap: normal | <length-percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | كلمة مفتاحية | المسافة الافتراضية بين الأعمدة. |
<length> | النوع | مسافة ثابتة بين الأعمدة. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-gap | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： عادةً ما يساوي normal قيمة 1em (بناءً على حجم الخط الحالي) وهو المسافة الافتراضية.
تحذير： المسافة الصغيرة جدًا تجعل الأعمدة المتجاورة صعبة التمييز؛ والكبيرة جدًا تهدر المساحة وتقطع سطر القراءة. يُوصى عادةً بقيمة حول 1.5em إلى 2em، أو 24px إلى 40px.
❓ الأسئلة الشائعة
Qما الفرق بين column-gap و gap؟
Acolumn-gap هي خاصية المسافة الخاصة بالتخطيط متعدد الأعمدة؛ و gap هي خاصية المسافة العامة لـ Flexbox و Grid. في المتصفحات الحديثة، كلاهما جزء من نفس نظام المسافات: يعمل gap أيضًا في التخطيطات متعددة الأعمدة، ومكافئ لـ column-gap هناك، ويغطي كذلك row-gap و column-gap في flex و grid. في تخطيط متعدد الأعمدة، يُقرأ column-gap بوضوح أكبر، بينما gap هو الخيار الموحّد عبر أنماط التخطيط الثلاثة.
Qهل يمكن لـ column-gap استخدام نسبة مئوية؟
Aنعم. وفقًا لمواصفات CSS متعدد الأعمدة، يقبل column-gap القيمة normal أو <length-percentage>، حيث تُحسب النسبة المئوية بالنسبة إلى عرض الحاوية متعددة الأعمدة؛ هذه ميزة أحدث، إذ كانت المواصفات السابقة تسمح بالأطوال فقط. إذا كنت بحاجة لدعم المتصفحات القديمة، التزم بوحدات ثابتة مثل px أو em، لأن النسب المئوية قد تتدهور في بعض المحركات القديمة. عند الشك، استخدم طولًا لأقصى توافق.
Qما القيمة الافتراضية لـ column-gap؟
Aالافتراضي هو normal، الذي يُصيّره المتصفحات عادةً كـ 1em بناءً على حجم الخط الحالي، مما يعني أن المسافة تتناسب مع الخط. إذا كنت تريد مسافة ثابتة يمكن التنبؤ بها، عيّن طولًا صريحًا مثل column-gap:32px. تتفق المتصفحات في الغالب على أن normal تعني 1em، لكن النتيجة المعروضة لا تزال تعتمد على الخط المستخدم، لذا يتغير التباعد الفعلي عند تغيّر حجم الخط.
Qهل يأخذ column-gap مساحة من الأعمدة؟
Aلا. المسافة محجوزة بين الأعمدة: عند توزيع العرض، يطرح المتصفح أولًا مجموع كل المسافات column-gap، ثم يقسم العرض المتبقي بين الأعمدة. لذا فإن زيادة column-gap تجعل كل عمود أضيق؛ حافظ على نسبة معقولة بين المسافة وعرض العمود كي لا تُضغط الأعمدة بشكل يصعب قراءته، خاصة في إطارات العرض الضيقة حيث كل بكسل مهم.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
columns (اختصار متعدد الأعمدة)
اضبط تخطيطًا متعدد الأعمدة بشكل عام.
column-rule
أضف خطًا في المسافة بين الأعمدة.
