پراپرتی های height و width برای تعیین ارتفاع و عرض یک المان استفاده میشود.
height و width را میتوان بصورت auto تنظیم (این مقدار پیشفرض است و به معنای آن است که مرورگر ارتفاع و عرض المان را محاسبه میکند)، یا برای آن مقدار معینی در قالب px، cm، یا غیره تعیین شود و یا درصدی از بلاکی که در آن قرار دارد تعیین شود
مثال
div { height: 100px; width: 500px; background-color: powderblue; }
نکاتی که باید در ذهن داشته باشید
پراپرتی های height و width شامل padding، border، یا margin نمیشود؛ این پراپرتی ها ارتفاع/عرض را درون padding، border، و margin المان تعیین میکنند.
max-width
پراپرتی max-width برای تعیین حداکثر عرض یک المان استفاده میشود.
max-width مقدار معینی در قالب px، cm، یا غیره تعیین شود و یا درصدی از بلاکی که در آن قرار دارد تعیین شود، یا به آن مقدار none داده شود (این مقدار پیش فرض است و به معنای آن است که حداکثر عرض وجود ندارد).
در مثال بالا مشکلی که المان div با آن مواجه میشود زمانی رخ میدهد که پنجره مرورگر کوچکتر از عرض المان شود (500px). در این زمان مرورگر اسکرول افقی به صفحه میدهد.
در این شرایط استفاده از پراپرتی max-width به مرورگر این امکان را میدهد تا این مشکل را هندل کند.
مثال
پنجره مرورگر خود را کمتر از 500px کنید تا تفاوت بین دو div را ببینید.
نکاتی که باید در ذهن داشته باشید
مقدار پراپرتی max-width پراپرتی width را اورراید میکند.