30. ارتفاع السطر والمسافات الرأسية (line-height)

تتحكم خاصية line-height في المساحة الرأسية بين سطور النص. ارتفاع السطر المناسب ضروري للقراءة المريحة.

فهم قيم ارتفاع السطر

يمكن أن تأخذ line-height عدة أنواع من القيم، ولكن يُفضل استخدام نوع واحد منها بشدة.

1. رقم بدون وحدة (موصى به)

استخدام رقم (مثل 1.5) هو أفضل ممارسة. يتم حساب الارتفاع الفعلي بضرب هذا الرقم في font-size الخاص بالعنصر. يتم توريث هذه القيمة للأطفال كنسبة، وليس كقيمة بكسل ثابتة، مما يضمن التناسب.

css body { /* موصى به لنص الجسم، عادة من 1.4 إلى 1.6 لسهولة القراءة */ line-height: 1.6; }

2. وحدات الطول (تجنبها للنصوص)

استخدام px أو rem يحدد ارتفاعاً ثابتاً، وهو أمر يمثل مشكلة لأنه إذا تغير حجم الخط (على سبيل المثال، في عنصر ابن)، فقد يتسبب ارتفاع السطر الثابت في تداخل النص.

css /* تجنب: إذا كبر الخط، فقد يكون ارتفاع السطر 20 بكسل صغيراً جداً */ p { line-height: 20px; }

3. النسبة المئوية (نسبة إلى حجم خط العنصر)

line-height: 150% تعادل line-height: 1.5.

ارتفاع السطر لتوسيط السطور المنفردة

من الحيل العملية استخدام line-height مساوٍ لـ height العنصر لتوسيط سطر واحد من النص رأسياً، كما هو الحال في زر صغير أو عنصر تنقل.

css .nav-item { height: 40px; line-height: 40px; /* يوسط النص رأسياً */ border: 1px solid black; }