تعیین حداقل ارتفاع المان در CSS – ویژگی min-height

در CSS از ویژگی min-height برای تعیین حداقل ارتفاع المان استفاده می‌شود. در واقع استفاده از این ویژگی باعث می‌شود ارتفاع المان کوچکتر از مقدار ویژگی min-height نشود.

چند نکته در مورد حداقل ارتفاع المان در CSS

همانطور که پیشتر در مجموعه آموزشی CSS آموختید از ویژگی height برای تعیین ارتفاع المان های HTML استفاده می‌شود. در صورتی که ارتفاع موردنیاز محتوا یا مقداری که برای ویژگی height مشخص شده از مقدار ویژگی min-height کوچکتر باشد ارتفاع المان برابر با مقدار min-height می‌شود.

اگر مقدار ویژگی min-height از مقدار ویژگی height یا max-height بیشتر باشد ارتفاع المان برابر با مقدار ویژگی min-height خواهد شد.

مشابه با ویژگی height می‌توانید برای ویژگی min-height نیز از مقادیر طول یا درصد (به صورت درصدی از ارتفاع بلوک دربرگیرنده) استفاده کنید.

نحوه استفاده از ویژگی min-height

برای تعیین حداقل ارتفاع المان های مختلف با کمک ویژگی min-height در CSS کافیست مشابه با نمونه زیر مقدار مناسبی برای این ویژگی مشخص کنید:

span.a {
  min-height: 250px;
}

با توجه به قانون CSS فوق، مقدار 250px برای ویژگی min-height باعث می‌شود حداقل ارتفاع تمام المان های <span> که دارای کلاس a هستند برابر با 250 پیکسل شود.

در کنار قانون فوق، دو قانون زیر را هم درنظر بگیرید:

span.b {
  height: 200px;
}
span {
  border: 1px solid black;
  display: inline-block;
  margin: 5px;
}

فرض کنید در سند HTML، سه المان <span> به صورت زیر وجود دارد:

<span>Element 1</span>
<span class="a">Element 2</span>
<span class="a b">This is Element 3 which is longer than Element 1 and 2.</span>

با توجه به این سه المان، نتیجه قانون های CSS قبل روی این سند مشابه با تصویر زیر خواهد بود. المان <span> اول به صورت عادی ارتفاعی به اندازه محتوایش خواهد داشت. اما حداقل ارتفاع المان <span> دوم که دارای کلاس a است باید برابر 250 پیکسل باشد (هرچند این مقدار بیش از چیزی است که برای نمایش محتوای المان لازم است. درنتیجه این المان هم ارتفاعی برابر با مقدار حداقلی 250 پیکسل را خواهد داشت). المان <span> سوم هم که دارای دو کلاس a و b است با اینکه طولانی‌تر است و مقدار ویژگی height برای آن برابر با 200 پیکسل تعیین شده است اما از آنجایی که این مقدار کوچکتر از حداقل ارتفاع است، ارتفاعی برابر با 250 پیکسل خواهد داشت.

بیشتر بخوانید: تعیین حداقل پهنای المان در CSS – ویژگی min-width

بیشتر بخوانید: تعیین حداکثر ارتفاع المان در CSS – ویژگی max-height

بازگشت به فهرست مجموعه آموزشی CSS