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

ما تقصده هو line-height وهي لتحديد المسافة العمودية بين أسطر النص في عنصر ما، أي تتحكم في الارتفاع أو المسافة بين الأسطر في النص، وذلك لتسهيل القراءة أو التحكم في شكل النص حسب التصميم.

p {
    font-size: 16px;
    line-height: 1.5; 
}

لاحظ وضعت قيمة 1.5 وتعني مرة ونص حجم الخط وهو 16، بالتالي قيمة 1.5 ستصبح 24px في خاصية line-height، مع العلم القيمة الإفتراضية التي يُحددها المتصفح هي 1.2

وتستطيع كتابتها مباشرًة لا مشكلة:

p {
    font-size: 16px;
    line-height: 24px; 
}

الخاصية line-height

السلام عليكم ورحمة الله تعالى وبركاته،

أفضل طريقة لإضافة تباعد بين السطور هي استخدام القيم الرقمية مع خاصية line-height فهذه الطريقة هي الأكثر مرونة وعملية لأنها تتكيف تلقائيا مع أحجام الخطوط المختلفة دون الحاجة لتعديل القيم يدويا.

فعندما تكتب التالي:

line-height: 1.5

فهذا يعني أن المسافة بين السطور ستكون 1.5 ضعف حجم الخط المستخدم، فإذا كان حجم الخط 16px فسيصبح التباعد 24px تلقائيا، وإذا غيرت حجم الخط إلى 20px فسيصبح التباعد 30px دون تدخل منك وهذا ما يجعل التصميم متجاوبا ومتسقا عبر جميع العناصر وهذه بضعة أمثلة على استعمالها:

p {
    font-size: 16px;
    line-height: 1.6;
}

h2 {
    font-size: 24px;
    line-height: 1.3;
}

.large-text {
    font-size: 20px;
    line-height: 1.8;
}

كما تم التوضيح فإنه يمكنك إضافة تباعد بين السطور (line spacing) عبر استخدام خاصية line-height ولكن إذا كنت تستخدم إطار عمل مثل Bootstrap في موقعك، فبإمكانك الاستفادة من فئات مسافات النص الجاهزة (مثل .lh-lg لزيادة line-height، وفئات الهوامش .mb-3، .pb-4 وغيرها) بدلًا من كتابة CSS من الصفر.

<p class="lh-lg">
  ...
</p>