تفاوت width وmax-width

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

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

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

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

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

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