ویژگی line-height ارتفاع ردیف هایی که نوشته در آن قرار می گیرد را برای یک عنصر تعیین می کند. یعنی اگر عنصری دارای چندین خط نوشته باشد فاصله خطوط مبنا یک عنصر توسط این ویژگی مشخص می شود.
در تصویر زیر مشاهده می کنید که فاصله خطوط از حالت عادی بیشتر است. این کار توسط ویژگی line-height صورت گرفته است:
مقدار این ویژگی می تواند کلمات کلیدی مثل normal و یا اعدادی با واحدهای طولی (px, em ,…) باشند. همینطور مقدار می تواند بصورت درصدی و یا یک عدد بدون واحد تعیین شود.
پس در نتیجه حالات زیر صحیح هستند:
line-height: 16px;
line-height: 2em;
line-height: 1.8;
line-height: 1.5rem;
line-height: 200%;
line-height: normal;
line-height: inherit;
زمانی که از مقادیر درصدی استفاده شود آن مقدار نسبت به مقدار font-size همان عنصر محاسبه می شود, به عنوان نمونه:
span {
font-size: 16px;
line-height: 120%; /* (16px * 120)/100 = 19.2px */
}
همانطور که مشاهده می کنید مقدار محاسبه شده برای عنصر 19.2 پیکسل است.
توجه داشته باشید که استفاده از مقدایر طولی و درصدی توصیه نمی شود. بلکه بهتر است برای این ویژگی از مقادیر بدون واحد استفاده کنیم. چرا؟
مثال بالا را در نظر بگیرد. از آنجایی که ویژگی line-height جز ویژگی هایی است که عنصر از پدرش ارث می برد پس همان مقدار محاسبه شده پدر, برای عنصر فرزند هم اعمال می شود.
فرض کنید عنصر بالا فرزندی داشته باشد که font-size آن برابر با 24px باشد. این عنصر برای فاصله خطوطش مقدار 19.2 پیکسل را از پدرش به ارث می برد که با توجه به اندازه فونتش این مقدار خیلی کم است و خطوط احتمالا روی هم قرار می گیرد.
پس دوباره مجبور می شوید تا برای فرزند هم line-height را بصورت مجزا تعریف کنید که کار درستی نیست. پس راه حل چیست؟
راه حل این است که از مقادیر بدون واحد استفاده کنید. در این روش مقدار محاسبه شده و نهایی برای هر عنصر بر اساس اندازه فونت همان عنصر صورت می گیرد.
در مثال بالا اگر line-height عنصر 1.2 باشد. همین مقدار به فرزندش ارث می رسد. و چون اندازه فونت فرزند 24 پیکسل است. مقدار نهایی برای فرزندش بصورت زیر است:
line-height: /* (24px * 1.2) = 28.8px */
مقدار normal برای این ویژگی مقدار اولیه و پیشفرض است و وابسته به مرورگر عمل می کند. یعنی مرورگر تصمیم می گیرد که چه فاصله ای برای خطوط یک عنصر در نظر بگیرد. که این کار را بر اساس نوع فونت عنصر انجام می دهد. معمولا این اندازه در حدود 1 تا 1.2 می باشد.
در دموی زیر با تغییر مقدار line-height به درک بهتر موضوع کمک کنید:
See the Pen line-height by Mojtaba Seyedi (@seyedi) on CodePen.
می توان این ویژگی را در مدل مختصر نویسی ویژگی font نیز تعیین کرد. برای این کار باید مقدار font-size و line-height را با یک اسلش از هم جدا کنید.
html {
font: 110%/1.5;
}
پس در نتیجه کد بالا برابر است با:
html {
font-size: 110%;
line-height: 1.5;
}
پشتیبانی مرورگر ها
ویژگی line-height در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.
سوال داری؟ برو به پنل پرسش و پاسخ