ویژگی line-height در CSS

line-height Property

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

نحوه نوشتار

line-height: normal;
line-height: 2.1;
line-height: 23px;
line-height: 25%;

مقادیر

عدد​

این عدد در اندازه فونت ضرب می شود و فاصله بین خطوط متن را مشخص می کند.

واحد‌های اندازه

فاصله بین خطوط متن را با استفاده از واحدهای اندازه مانند px , em , rem و … تعیین می کند.

درصد​

در این حالت درصدی از اندازه فونت عنصر در آن ضرب می شود.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

 <p class="l-1">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>
<p class="l-2">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>
<p class="l-3">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
      به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
      کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
      نوع و اندازه فونت و ظاهر متن باشد.
</p>

css

p {
    direction: rtl;
    color: #ffffff;
    background-color: #333333;
    padding: 15px;
    font-family: "Segoe UI";
}
.l-1 { 
    line-height: 20px; 
}
.l-2 {
    line-height: 2.5; 
}
.l-3 {
    line-height: 50%; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.