تعیین ارتفاع خط و فاصله بین خطوط در 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 در سی‌اس‌اس می‌توانید از انواع مقادیر رایج زیر استفاده کنید:

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

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