تاریخ انتشار:۱۴:۴۰ ۱۳۹۹/۵/۱۸

استفاده صفت width و max-width

تنظیم صفت width برای یک عنصر block، مانع از گسترش آن در همه ی فضای یک خط میشود و در این صورت میتوانید مقدار صفت margin را برای آن عنصر با مقدار auto مقدار دهی کنید که باعث میشود عنصر مورد نظر به صورت افقی در مرکز container خود قرار بگیرد.

عنصر در این حالت به اندازه ی مشخصی فضا اشغال میکند و باقی مانده فضا به صورت مساوی بین دو margin سمت راست و چپ تقسیم میشود :

 

این عنصر <div> دارای مقدار 500 پیکسل برای صفت width است و مقدار margin برای آن با auto مقدار دهی شده است.

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

 

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

 

این عنصر <div> دارای مقدار 500 پیکسل برای صفت max-width است و مقدار margin برای آن با auto مقدار دهی شده است.

 

با کوچک کردن صفحه ی مرورگر میتوانید تفاوت عناصر <div> بالا را مشاهد کنید.

در نمونه مثال زیر میتوانید تفاوت صفات width و max-width را در هنگام کوچک و بزرگ کردن صفحه مشاهده کنید :

 }  div.ex1
 ; width : 500px
 ; margin : auto
 ; border : 3px solid #73AD21
 {
 }  div.ex2
 ;  max-width : 500px
 ;  margin : auto
 ;  border : 3px solid #73AD21
 {

منبع:learnsource