خاصية line-height
آخر تحديث: 2026-09-13
line-height خاصية line-height
تحدد خاصية line-height في CSS المسافة الرأسية بين سطور النص. يؤدي ارتفاع السطر المختار جيدًا إلى تحسين كبير في قابلية قراءة النصوص الطويلة، ويكون عادةً حوالي 1.5 ضعف حجم الخط.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | number |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
line-height: normal | <number> | <length> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | كلمة مفتاحية | ارتفاع السطر الافتراضي (حوالي 1.2) |
<number> | النوع | مضاعف بدون وحدة، مثل 1.5 |
<length> | <percentage> | النوع | ارتفاع سطر ثابت كطول أو نسبة مئوية |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| line-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تفضّل الأرقام بدون وحدة (مثل 1.5): تتغير مع حجم الخط وسلوك الوراثة فيها أكثر قابلية للتنبؤ.
مهم： تُورَث الأرقام بدون وحدة والنسب المئوية بشكل مختلف: يُورَث الرقم بدون وحدة كمضاعف، بينما تُحل النسبة المئوية بالنسبة لحجم خط الأب وتُورَث كقيمة بكسل ثابتة.
❓ الأسئلة الشائعة
Qكيف أوسّط سطرًا واحدًا من النص عموديًا باستخدام قواعد CSS؟
Aاضبط line-height ليكون مساويًا لارتفاع الحاوية، مثلًا height: 40px; line-height: 40px، وسيتوسّط السطر الواحد عموديًا. لكن النص متعدد الأسطر سيفيض، وفي هذه الحالة يجب التبديل إلى Flexbox مع align-items: center.
Qما ارتفاع السطر الذي يجب أن أستخدمه لنص أساسي قابل للقراءة في موقعي؟
Aللنص الأساسي يُوصى بمقدار من 1.5 إلى 1.8 ضعف حجم الخط؛ وتستفيد القراءة الطويلة من 1.7 إلى 1.8، بينما يمكن للعناوين أن تكون أضيق من 1.2 إلى 1.4. غالبًا ما تستخدم كتل الأكواد من 1.4 إلى 1.6. على الأجهزة المحمولة حيث تكون الشاشات أضيق، يحتاج ارتفاع السطر عادةً إلى أن يكون أكبر قليلًا من سطح المكتب.
Qما الفرق بين line-height: 1.5 وline-height: 150%؟
Aالفرق يكمن في الوراثة. الرقم 1.5 بدون وحدة هو مضاعف، لذا يحسب الأبناء ارتفاع السطر من حجم خطهم الخاص — سلوك يمكن التنبؤ به. أما النسبة المئوية مثل 150% فتُحل كقيمة بكسل ثابتة بالنسبة لحجم خط الأب قبل أن تُورَث، لذا لا تتعدّل عند تغيّر حجم خط الأبناء، مما قد يسبب مشاكل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
