cssblog.ir logo
P

line-height

تنظیم ارتفاع متن در CSS با استفاده از line-height

مشخصه line-height در تعیین ارتفاع خطوط نقش داشته و همچنین می‌توان از آن برای تراز عمودی عناصر نیز استفاده نمود

این مشخصه از مشخصه‌های مربوط به متن است اما بدلیل برخی رفتارهای آن که در ادامه اشاره خواهم کرد، کاربردهای جالب دیگری هم دارد. کاربرد اصلی این مشخصه برای تنظیم ارتفاع خطوط می‌باشد.

برای مثال: در اینجا همانطور که مشاهده می کنید ارتفاع خطوط برابر با ۳۰ پیکسل تنظیم شده است: 

مقادیر قابل قبول

این مشخصه علاوه بر مقادیری درصدی، عددی و طولی دو کلمه کلیدیnormal وnone را نیز قبول می‌کند.


مقادیر درصدی

این مقادیر به نسبت سایز فونت (font-size) محاسبه می شوند و انگار که به اندازه مقدار داده شده ارتفاع خطوط را کوچکتر یا بزرگتر می کنیم. مثلا اگر سایز فونت ۲۰ پیکسل باشد ۲۰۰درصد برابر است با : 

 

مقادیر طولی

تمام مقادیر طولی با واحد پیکسل (px) و واحدهای نسبی remوem برای این مشخصه قابل استفاده هستند.

مثال: استفاده از px

h2 {
	line-height: 30px;
}

مثال: استفاده از rem

html {
	font-size: 14px;
}

p {
	line-height: 2rem; /* 28px */
}

مثال: استفاده از em

p {
	font-size: 12px;
	line-height: 3em; /* 36px */
}

مقادیر عددی

یکی از راه‌های مقدار دهی به این مشخصه استفاده از مقادیر عددی می‌باشد که این مقادیر هیچ واحدی ندارند (unitless هستند). مقادیر عددی می‌توانند هر عددی حتی اعداد اعشاری را شامل شوند.

یکی از تفاوت‌های استفاده از این مقادیر بجای سایر روشها درمورد ارث‌بری مقدار این مشخصه است، به این معنی که در هنگام استفاده از مقادیر عددی، عناصر فرزند می توانند ارتفاع خطوط را بر حسب سایز فونت خود محاسبه کنند تا اینکه یک مقدار مشخص را از والد خود به ارث ببرند که معمولا این ارث بری نیاز به تعیین مجدد (override) دارد.

p {
	font-size: 14px;
	line-height: 2; /* 28px */
}

کاربرد line-height در تراز کردن عمودی در میانه فضا (وسط عمودی)

در دنیای CSS همیشه قرار دادن تراز کردن عناصر در وسط از لحاظ عمودی دارای محدودیت ها بیشتری است و به همین دلیل بر خلاف تراز افقی نیازمند ترفندهای خاص خود می باشد. با این حال، یکی از راه‌های جالب وسطچین عمودی عناصر استفاده از ترکیب line-heightو display: inline-blockمی باشد. تنها کافی است این نکته را بدانیم که «متن عناصر یا عناصرinline یا inline-blockبا داشتن vertical-align: middleهمواره در وسط ارتفاع خط خود قرار می گیرند»

جهت درک بهتر  به مثال‌های زیر دقت کنید:

 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند