height یک ارتفاع مشخص درخواست می‌کنه، اما min-height یک کف برای اندازه است. اگه مقدار height از این کف کمتر باشه، مرورگر حداقل تعیین‌شده رو رعایت می‌کنه. این ویژگی برای بخش‌هایی مفیده که باید حتی با متن کوتاه، فضای کافی داشته باشن. برای متن‌های بلند معمولاً بهتره اجازه رشد طبیعی بدیم تا محتوا پشت یک اندازه سخت پنهان نشه.
توی مثال، height چهل پیکسلی نمی‌تونه جعبه رو از حداقل هشتاد کوتاه‌تر کنه. توی فعالیت یک پنل کوتاه داریم که به اشتباه حداقل کوچکی گرفته. قرار نیست با چند br خالی اون رو بلند کنیم؛ باید قانون اندازه درست بشه. خطای رایج یکی‌گرفتن min-height و max-height است: اولی کف و دومی سقفه. برای این سناریو عمداً عددهای ثابت و محتوای کوتاه داریم تا نتیجه بدون وابستگی به طول متن روشن باشه. نوع border-box رو هم حفظ کن تا ابعادی که اندازه می‌گیریم همان چارچوب تعریف‌شده باشد.
✍️ مثال حل‌شده:
<section class="panel">متن کوتاه</section>
<style>.panel { height:40px; min-height:80px; }</style>
حالا نوبت توئه: پنل .panel باید height:60px، min-height:120px و box-sizing:border-box داشته باشد؛ ارتفاع محاسبه‌شده آن ۱۲۰ پیکسل است. minimum اشتباه ۲۰ پیکسلی را اصلاح کن. متن کوتاه و رنگ زمینه را نگه دار و با افزودن سطر خالی ارتفاع نساز.
فعالیت شما
پنل .panel باید height:60px، min-height:120px و box-sizing:border-box داشته باشد؛ ارتفاع محاسبه‌شده آن ۱۲۰ پیکسل است. minimum اشتباه ۲۰ پیکسلی را اصلاح کن. متن کوتاه و رنگ زمینه را نگه دار و با افزودن سطر خالی ارتفاع نساز.