اندازه متن با font-size تنظیم می‌شه. واحد px یک اندازه مشخص برای این تمرین‌ها می‌ده و کار مقایسه نتیجه رو ساده می‌کنه. بعضی ویژگی‌های متنی از والد به فرزند می‌رسن؛ به این رفتار ارث‌بری می‌گیم. اگه ظرف روی ۲۴ پیکسل باشه، متن‌های داخلش هم معمولاً همین اندازه رو می‌گیرن، مگر اینکه یک قانون مستقیم برای خود اون عنصر مقدار دیگری تعیین کنه.
توی مثال، span اول اندازه والد رو می‌گیره و span دوم قانون مخصوص خودش رو داره. خطای رایج اینه که تصور کنیم اندازه والد همیشه با اندازه فرزند جمع می‌شه. مقدار ۱۶ پیکسل روی فرزند یعنی اندازه نهایی همون ۱۶ پیکسل؛ اینجا جمع و ضربی انجام نمی‌دیم. برای پاسخ تمرین اول والد هر متن رو پیدا کن و بعد دنبال قانون مستقیم روی خود متن بگرد. ارتفاع خط، فاصله بیرونی و اندازه جعبه موضوع‌های جدا هستن و از روی عدد font-size به‌تنهایی تعیین نمی‌شن.
✍️ مثال حل‌شده:
<div class="label"><span>بزرگ</span><span class="tiny">کوچک</span></div>
<style>.label { font-size: 24px; } .tiny { font-size: 16px; }</style>
حالا نوبت توئه: در .group اندازه ۲۲ پیکسل است و .small اندازه ۱۴ پیکسل دارد. اندازه نهایی span بدون کلاس و span.small را به همین ترتیب انتخاب کن. هیچ قانون مستقیم دیگری برای این دو span وجود ندارد؛ عددها با هم جمع نمی‌شوند.
فعالیت شما
در .group اندازه ۲۲ پیکسل است و .small اندازه ۱۴ پیکسل دارد. اندازه نهایی span بدون کلاس و span.small را به همین ترتیب انتخاب کن. هیچ قانون مستقیم دیگری برای این دو span وجود ندارد؛ عددها با هم جمع نمی‌شوند.