حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

آموزش line-height در CSS؛ فاصله خوانای سطرهای فارسی

رنگ و تایپوگرافی فارسی با CSS · 0٪

وقتی چند سطر متن داریم، فقط بزرگ‌کردن حروف خوانایی رو تضمین نمی‌کنه. line-height ارتفاع فضای هر خط رو تعیین می‌کنه و به متن فرصت نفس‌کشیدن می‌ده. مقدار ۲۸ پیکسل یعنی جعبه هر خط این ارتفاع رو داشته باشه؛ این ویژگی با فاصله بیرونی پاراگراف فرق داره. در این درس واحد پیکسل می‌نویسیم تا اندازه خروجی دقیق و قابل بررسی باشه.

مثال یک توضیح کوتاه با حروف ۱۴ و خط ۲۴ پیکسل می‌سازه. تفاوت این دو عدد فضای خواندن رو فراهم می‌کنه. توی فعالیت، متن دو خط صریح داره تا اثر ارتفاع خط دیده بشه. اشتباه رایج تنظیم margin برای فاصله بین سطرهای یک پاراگرافه؛ margin بیرون جعبه است و بین خط‌های داخلی اعمال نمی‌شه. اندازه حروف و رنگ رو هم طبق خواسته کامل کن تا نتیجه فقط به یک ویژگی وابسته نباشه. تعداد کلمه‌ها یا طول جمله نباید باعث بشه برای فاصله سطرها تگ خالی اضافه کنی.

✍️ مثال حل‌شده:

<p class="caption">توضیح کوتاه<br>در دو سطر</p>
<style>.caption { font-size: 14px; line-height: 24px; }</style>

حالا نوبت توئه: پاراگراف .reading با دو سطر آماده را با font-size برابر ۱۸ پیکسل، line-height برابر ۳۰ پیکسل و رنگ #334155 نمایش بده. تگ br موجود را نگه دار؛ برای فاصله بین سطرها پاراگراف خالی یا margin اضافه نکن.

فعالیت شما

پاراگراف .reading با دو سطر آماده را با font-size برابر ۱۸ پیکسل، line-height برابر ۳۰ پیکسل و رنگ #334155 نمایش بده. تگ br موجود را نگه دار؛ برای فاصله بین سطرها پاراگراف خالی یا margin اضافه نکن.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت وارد شوید

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

کد اولیهٔ فعالیت

<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head>
<body>
<p class="reading">تمرین هر روز<br>یادگیری پیوسته</p>
</body>
</html>

ظاهر صفحه (CSS)

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box}
.reading{font-size:18px;/* ارتفاع خط و رنگ را اضافه کن */}