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

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

چند نکته در مورد حداقل پهنا یا عرض المان در CSS

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

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

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

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

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

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

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

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

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

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

<span>Element 1</span><br>
<span class="a">Element 2</span><br>
<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 است با اینکه طولانی‌تر است و مقدار ویژگی width برای آن برابر با 200 پیکسل تعیین شده است اما از آنجایی که این مقدار کوچکتر از حداقل پهناست، پهنایی برابر با 250 پیکسل خواهد داشت.

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

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

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