الخاصية line-height

الخاصية line-height في CSS تضبط المسافة المستخدم للأسطر، كما في النصوص؛ أما على العناصر الكتلية (block elements) فهي تُحدِّد الارتفاع الأدنى للصناديق النصية (line boxes) ضمن العنصر.

بطاقة الخاصية

القيمة الابتدائية	normal
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	نعم
القيمة المحسوبة	كما حُدِّدت، ما عدا القيم النسبية التي ستحوّل إلى أطوال مطلقة.

/* كلمة محجوزة */
line-height: normal;

/* أعداد دون واحدة، ستضرَب بقيمة حجم الخط للعنصر */
line-height: 3.5;

/* <length> أطوال مطلقة */
line-height: 3em;

/* <percentage> نسب مئوية */
line-height: 34%;

/* القيم العامة */
line-height: inherit;
line-height: initial;
line-height: unset;

أمثلة

مثال عن استخدام الخاصية line-height مع مختلف أنواع القيم، لاحظ أنَّ جميع القواعد الآتية ستؤدي إلى ضبط ارتفاع السطر إلى القيمة نفسها:

div { line-height: 1.2;   font-size: 10pt; }
div { line-height: 1.2em; font-size: 10pt; }
div { line-height: 120%;  font-size: 10pt; }
div { font: 10pt/1.2  Georgia,serif; }

من المستحسن ضبط قيمة line-height باستخدام الخاصية المختصرة font كما هو موضَّح أعلاه، لكن فعل ذلك سيتطلب منا ضبط قيمة الخاصية font-family أيضًا.

استخدام القيم الرقمية دون واحدات

المثال الآتي يبيّن لماذا من الأفضل استخدام القيم الرقمية <number> بدلًا من الأطوال <length>، إذ سنستخدم عنصرَي <div>، الأول له إطار أخضر ويستخدم قيمة رقمية دون واحدة، والثاني له إطار أحمر ويستخدم قيمة طولية مع الواحدة em:

<div class="box green">
    <h1>تجنب النتائج غير المتوقعة باستخدام قيم عددية دون واحدات مع الخاصية line-heigth</h1>
  إذ إنَّ وراثة القيم الطولية والنسب المئوية ستؤدي إلى سلوك غير متوقع.
</div>

<div class="box red">
    <h1>تجنب النتائج غير المتوقعة باستخدام قيم عددية دون واحدات مع الخاصية line-heigth</h1>
  إذ إنَّ وراثة القيم الطولية والنسب المئوية ستؤدي إلى سلوك غير متوقع.
</div>

شيفرة CSS:

.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

لاحظ أنَّ قيمة الخاصية line-height للعنصر <h1> الأول محسوبة نسبةً إلى حجم الخط للعنصر نفسه (أي 30px × 1.1 = 33px)، بينما قيمة الخاصية line-height لعنصر <h1> الثاني محسوبة نسبةً إلى حجم الخط للعنصر <div> الأب (أي 15px × 1.1 = 16.5px) وهذه القيمة غير ملائم إطلاقًا.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4	7	1.0

البنية العامة

تقبل الخاصية line-height قيمةً من القيم التالية.

normal

تختلف القيمة بين المتصفحات، إذ تستعمل متصفحات سطح المكتب القيمة 1.2 تقريبًا، وتختلف اعتمادًا على نوع الخط font-family المستخدم على العنصر.

<number>

القيمة المستخدمة هي الرقم المضبوط مضروبًا بحجم الخط المستخدم على العنصر نفسه، وهذه هي الطريقة المُفضَّلة في أغلبية الحالات لضبط الخاصية line-height لتجنب النتائج غير المتوقعة الناجمة عن وراثة القيم.

<length>

القيمة الطولية <length> ستُستخدَم لحساب ارتفاع السطر.

<percentage>

هذه القيمة تكون نسبةً إلى حجم الخط المستخدم على العنصر نفسه.

لاحظ أنَّ النسب المئوية والأطوال ذات الواحدة em قد تؤدي إلى نتائج غير متوقعة (انظر الأمثلة).

البنية الرسمية

line-height: normal | <number> | <length> | <percentage>;

مصادر ومواصفات

• مسودة CSS Transitions.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.