ویژگی width در CSS
با استفاده از این ویژگی می توانید عرض یک عنصر HTML را تعیین نمایید. دقت نمایید که عناصر inline-level عرض و ارتفاع نمی گیرند. و این ویژگی تنها برای عناصر block یا حتی inline-block اعمال می گردد.
همانطور که در مقاله قبلی نیز اشاره شد؛ یک عنصر block-level همیشه تمام عرض عنصر نگهدارنده خود را اشغال می کند و اجازه نمی دهد که عنصر دیگری در کنار آن قرار گیرد. تنظیم کردن width یک عنصر block-level از بزرگتر شدن ناخواسته ی آن جلوگیری می کند. در زمان هایی که عرض یک عنصر block-level کمتر از عرض عنصر نگهدارنده خود باشد، شما می توانید با استفاده از ویژگی margin و اختصاص مقدار auto به آن، عنصر موردنظر را بصورت افقی در مرکز نگهدارنده خود قرار داد. در این حالت عنصر عرض مشخص شده را در بر می گیرد و فضای باقی مانده بطور مساوی بین چپ و راست عنصر تقسیم می شود.
نکته: مشکل < div > بالا وقتی رخ می دهد که پنجره مرورگر از عرض عنصر کوچک تر باشد. در این صورت مرورگر یک اسکرول افقی به صفحه اضافه می کند. استفاده از max-width در css، در این موقعیت قدرت مدیریت مرورگر برای صفحه های کوچک را افزایش می دهد. این مورد وقتی که برای دستگاه های با صفحات نمایش کوچک سایت طراحی می کنیم حائز اهمیت می باشد.
در حقیقت با استفاده از ویژگی max-width می توان یک عرض حداکثر برای عناصر html مشخص کرد.
زمانی که نمی خواهیم عرض عنصری از یک مقدار مشخصی بیشتر شود می توانیم با استفاده از این ویژگی آن مقدار را برای عنصر تعیین کنیم.
نکته: با استفاده از ویژگی min-width و max-width می توان برای عرض یک عنصر محدوده تعیین کرد.
برای مقداردهی کردن این ویژگی ها شما می توانید هم از واحدهای اندازه گیری مطلق مانند (px) و همچنین از واحدهای اندازه گیری نسبی مانند (% rem em) نیز استفاده کنید.
