CSS line-height-ایجنسی属性
- پیشین بند letter-spacing
- آئندہ صفحہ لیسٹ اسٹائل
تعریف و استفاده
ویژگی line-height فاصله بین سطرها (حجم سطر) را تنظیم میکند.
نکته:مقدار منفی مجاز نیست.
توضیح
این ویژگی بر روی چیدمان جعبه سطر تأثیر میگذارد. وقتی به یک عنصر بلوکی اعمال میشود، این مقدار فاصله بین خطوط پایینی و بالایی خطوط را تعریف میکند نه فاصله بین خطوط بالایی و پایینی.
تفاوت بین مقدار محاسبه شده line-height و font-size (در CSS به عنوان فاصله بین سطرها شناخته میشود) به دو نیم تقسیم میشود و به بالای و پایین محتوای سطر اضافه میشود. جعبه کوچکترین محتوایی که این محتوا را شامل میشود، جعبه سطر است.
مقدار عددی اولیه یک فاکتور بزرگنمایی指定 میکند که فرزندان بعدی از این فاکتور بزرگنمایی استفاده میکنند به جای مقدار محاسبه شده.
لطفاً به این بخشها نیز توجه کنید:
آموزش CSS:CSS متن
منابع HTML DOM:ویژگی lineHeight
مثال
فضای بین سطرها با درصد تنظیم کنید:
p.small {line-height:90%}
p.big {line-height:200%}
(میتوانید بیشتر مثالها را در پایین صفحه مشاهده کنید)
قانون CSS
line-height: normal|عدد|طول|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| معمولی | پیشفرض. فضای بین سطرهای معقول تنظیم کنید. |
| عدد | عدد تنظیم کنید، این عدد با اندازه فعلی فونت ضرب میشود تا فضای بین سطرها تنظیم شود. |
| طول | فضای بین سطرهای ثابت تنظیم کنید. |
| % | درصد فضای بین سطرها بر اساس اندازه فعلی فونت. |
| وراثت | این تعریف میکند که باید مقدار line-height از عنصر والد به عنصر فرزند ارث برده شود. |
جزئیات فنی
| مقدار پیشفرض: | معمولی |
|---|---|
| وراثت: | بله |
| نسخه: | CSS1 |
| قانون جاوااسکریپت: | موضوع.style.lineHeight="2" |
مثال عملی
- با استفاده از درصد فضای بین سطرها را تنظیم کنید
- این مثال نشان میدهد که چگونه میتوان با استفاده از درصد فضای بین سطرها را در یک پاراگراف تنظیم کرد.
- با استفاده از مقیاس پیکسلی فضای بین سطرها را تنظیم کنید
- این مثال نشان میدهد که چگونه میتوان با استفاده از مقیاس پیکسلی فضای بین سطرها را در یک پاراگراف تنظیم کرد.
- با استفاده از عدد فضای بین سطرها را تنظیم کنید
- این مثال نشان میدهد که چگونه میتوان با استفاده از یک عدد فضای بین سطرها را در یک پاراگراف تنظیم کرد.
پشتیبانی مرورگر
جداول میگویند که کدام مرورگر اولین نسخهای است که این ویژگی را کاملاً پشتیبانی میکند.
| کروم | IE / Edge | فائرفاکس | سافری | آپرا |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- پیشین بند letter-spacing
- آئندہ صفحہ لیسٹ اسٹائل
