ویژگی CSS line-height
- صفحه قبل letter-spacing
- صفحه بعدی list-style
تعریف و استفاده
ویژگی 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|number|length|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| normal | پیش‌فرض. تنظیم فضای بین سطرها معقول. |
| number | تنظیم عدد، این عدد با اندازه حروف فعلی ضرب می‌شود تا فضای بین سطرها تنظیم شود. |
| length | تنظیم فضای بین سطرها ثابت. |
| % | درصد فضای بین سطرها بر اساس اندازه حروف فعلی. |
| inherit | این تعریف می‌کند که باید مقدار line-height از عنصر والد به عنصر خود به ارث برسد. |
جزئیات فنی
| مقدار پیش‌فرض: | normal |
|---|---|
| erbیت‌پذیری: | بله |
| نسخه: | CSS1 |
| جمله‌بندی JavaScript: | object.style.lineHeight="2" |
مثال عملی
- تنظیم فضای بین سطرها با استفاده از درصد
- این مثال نشان می‌دهد که چگونه می‌توان با استفاده از درصد فضای بین سطرها را در یک پاراگراف تنظیم کرد.
- تنظیم فضای بین سطرها با استفاده از مقیاس پیکسلی
- این مثال نشان می‌دهد که چگونه می‌توان با استفاده از مقیاس پیکسلی فضای بین سطرها را در یک پاراگراف تنظیم کرد.
- تنظیم فضای بین سطرها با استفاده از عدد
- این مثال نشان می‌دهد که چگونه می‌توان با استفاده از یک عدد فضای بین سطرها را در یک پاراگراف تنظیم کرد.
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- صفحه قبل letter-spacing
- صفحه بعدی list-style
