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 پشتیبانی می کنند.