آموزش اسکرچ به صورت آنلاین

تعیین ارتفاع خط و فاصله بین خطوط در CSS – ویژگی line-height

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

نحوه استفاده از ویژگی و جزئیات تعیین فاصله میان خط ها در CSS

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

p.p1 {
  line-height: 1.5;
}

در مثال بالا مقدار 1.5 برای این ویژگی باعث می‌شود ارتفاع خط ها به اندازه 1.5 برابر اندازه فونت المان باشد. این مقدار روی تمام پاراگراف ها یا المان های <p> دارای کلاس p1 اعمال می‌شود.

در مثال زیر نیز مقدار 0.8 برای این ویژگی روی تمام المان های <p> با کلاس p2 اعمال می‌شود.

p.p2 {
  line-height: 0.8;
}

فرض کنید دو المان <p> به صورت زیر در یک سند HTML قرار دارد:

<p class="p1">This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph. This is the first paragraph.</p>
<br>
<p class="p2">This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.</p>

در تصویر زیر می‌توانید نتیجه تعیین فاصله بین خط ها با کمک قانون‌های CSS فوق روی این دو پاراگراف را مشاهده کنید.

تعیین فاصله بین خط ها با کمک ویژگی line-height در CSS

انواع مقادیر رایج برای ویژگی line-height در CSS

برای ویژگی line-height در سی‌اس‌اس می‌توانید از انواع مقادیر رایج زیر استفاده کنید:

  • مقدار normal: این مقدار، ارتفاع نرمالی برای خط ها و فاصله بین خطوط مشخص می‌کند. مقدار normal، مقدار پیشفرض برای ویژگی line-height می‌باشد و بسته به عامل کاربری متفاوت خواهد بود.
  • عدد: درج عدد بدون واحد برای ویژگی line-height باعث می‌شود ارتفاع خط برابر با همان عدد ضربدر اندازه فعلی فونت المان شود. نمونه استفاده از این نوع مقادیر را در مثال‌های بالا مشاهده کردید. این نوع مقادیر معمولا بهترین و رایج‌ترین روش برای تعیین ارتفاع خط و فاصله میان خطوط محسوب می‌شود.
  • طول: درج مقدار با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت) و … برای ویژگی line-height ارتفاع خط را به صورت مستقیم مشخص می‌کند. برای مثال مقدار 5px و 1cm.
  • درصد: درج مقدار برحسب درصد برای ویژگی line-height ارتفاع خط را به صورت درصدی از اندازه فونت المان مشخص می‌کند. برای مثال مقدار 80%.

بازگشت به فهرست مجموعه آموزشی CSS

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *