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

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

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

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

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

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

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

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

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

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

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

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

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

<span>Element 1</span><br>
<span class="a">This is Element 2 This is Element 2 This is Element 2</span><br>
<span class="a b">Element 3</span>

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

مثالی دیگر از کاربرد این ویژگی

فرض کنید برای یک المان <div> مقدار ویژگی width برابر با 500 پیکسل تنظیم شده باشد. در این حالت، اگر پهنای فضای قابل نمایش برای این المان کمتر از 500 پیکسل باشد به صورت پیشفرض نوار اسکرول افقی نمایان می‌شود. نمونه این وضعیت را می‌توانید در مثال زیر مشاهده کنید. کافیست ابعاد پنجره مرورگر را به حدی کاهش دهید که پهنای فضای قابل نمایش برای این المان به کمتر از 500 پیکسل برسد:

See the Pen A div element with 500px width by techdic (@techdic) on CodePen.

استفاده از ویژگی max-width به جای ویژگی width این مشکل را برطرف می‌کند. چرا که در این حالت، حداکثر پهنای المان <div> روی 500 پیکسل تنظیم می‌شود. به این ترتیب با کاهش ابعاد پنجره مرورگر خبری از نوار اسکرول افقی نخواهد بود.

See the Pen A div element with 500px max-width by techdic (@techdic) on CodePen.

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