شرح صفوف ومحتوى الفقرة
تضبط خاصية line-height الارتفاع الرأسي المخصص لكل سطر داخل العنصر. ورغم أنها تقبل وحدات ثابتة مثل 24px أو نسباً مئوية مثل 150%، فإن القاعدة الهندسية المعتمدة في واجهات الويب الحديثة هي كتابتها كأرقام مجردة بلا وحدة (Unitless Numbers) مثل 1.5 أو 1.6 أو 1.75.
يكمن السر في آلية التوريث للأبناء؛ فعند كتابة قيمة بوحدة البكسل أو النسبة المئوية على عنصر أب، يرث الأبناء الناتج النهائي المحسوب بالبكسل، فإذا وُجد عنوان فرعي كبير بحجم 32px داخل حاوية ارتفاع سطرها المحسوب 24px فسيتداخل سطرا العنوان فوق بعضهما! أما عند كتابة معامل مجرد مثل line-height: 1.6، فيرث كل عنصر ابن المعامل 1.6 نفسه ويضربه تلقائياً في حجم خطه الخاص.
CSS
.comfortable-copy {
font-size: 18px;
line-height: 1.7;
color: #261f36;
}
.cramped-copy {
font-size: 18px;
line-height: 1.05;
color: #584775;
}