در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خصوصیت line-height صحبت خواهیم کرد.

ویژگی line-height ارتفاع ردیف هایی که نوشته در آن قرار می گیرد را برای یک عنصر تعیین می کند. یعنی اگر عنصری دارای چندین خط نوشته باشد فاصله خطوط توسط این ویژگی مشخص می شود.

به عنوان به مثال به تصویر زیر دقت کنید،همانگونه که مشاهده می کنید فاصله خطوط بیش از اندازه معمول می باشد،این کار با استفاده از ویژگی line-height انجام شده است.

مقدار این ویژگی می تواند کلمات کلیدی مثل normal و یا اعدادی با واحدهای طولی (px, em ,…) باشند. همینطور مقدار می تواند بصورت درصدی و یا یک عدد بدون واحد تعیین شود.در مثال زیر نمونه هایی از نحوه استفاده از این ویژگی را مشاهده می کنید:

line-height: 20px;
line-height: 1.5em;
line-height: 2;
line-height: 1.5rem;
line-height: 150%;
line-height: normal;
line-height: inherit;

به این موضوع دقت کنید که زمانی که از مقادیر درصدی استفاده می کنید آن مقدار نسبت به مقدار font-size همان عنصر محاسبه می شود, به عنوان نمونه:

span {
  font-size: 16px;
  line-height: 150%; /* (16px * 150)/100 = 24px */
}

همانگونه که در محاسبات بالا مشاهده می کنید مقدار 24 پیکسل برای این ویژگی حساب شده است اما استفاده از مقدایر طولی و درصدی برای این ویژگی توصیه نمی شود. بلکه بهتر است برای این ویژگی از مقادیر بدون واحد استفاده کنیم.

دلیل این موضوع نیز ارث بری این مقدار توسط فرزند عناصر می باشد،فرض کنید عنصر بالا فرزندی داشته باشد که font-size آن برابر با 30px باشد. این عنصر برای فاصله خطوطش مقدار 24 پیکسل را از پدرش به ارث می برد که با توجه به اندازه فونتش این مقدار خیلی کم است و خطوط احتمالا روی هم قرار می گیرد،بنابراین برای حل این مشکل باید مقدار این ویژگی را برای عنصر فرزند نیز به طور مجزا تعیین کنیم.

راه حل چیست؟

راه حل این است که از مقادیر بدون واحد استفاده کنید.در این روش مقدار محاسبه شده و نهایی برای هر عنصر بر اساس اندازه فونت همان عنصر صورت می گیرد. در مثال بالا اگر line-height عنصر 1.2 باشد. همین مقدار به فرزندش ارث می رسد. و چون اندازه فونت فرزند 30 پیکسل است. مقدار نهایی برای فرزندش بصورت زیر است:

line-height: 1.2  /* (30px * 1.2) = 36px */ 

مقدار اولیه و پیش فرضی که مرورگرها برای این خاصیت در نظر می گیرند مقدار normal می باشد و وابسته به مرورگر عمل می کند. یعنی مرورگر تصمیم می گیرد که چه فاصله ای برای خطوط یک عنصر در نظر بگیرد. که این کار را بر اساس نوع فونت عنصر انجام می دهد. معمولا این اندازه در حدود 1 تا 1.2 می باشد.

می توان این ویژگی را در مدل مختصر نویسی ویژگی font نیز تعیین کرد. برای این کار باید مقدار font-size , line-height را با یک اسلش از هم جدا کنید.

html {
  font: normal normal 16px/1.5 tahoma;
}

کد بالا با کد زیر برابر می باشد :

html{
font-style:normal;
font-weight:normal;
font-size:16px;
line-height:1.5;
font-family:tahoam;
}

در دموی زیر می توانید مقادیر موردنظر خود را برای ویژگی line-height height وارد کرده و خروجی را مشاهده کنید،به این ترتیب می توانید درک بهتری از این خاصیت داشته باشید.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش CSS با ما همراه باشید.

کامنت جدید ...