ارتفاع و عرض عناصر در css

در این مقاله تنظیمات ارتفاع و عرض عناصر در css را شرح خواهیم داد.

خصوصیات height و width در css برای تعیین ارتفاع و عرض المان ها به کار می روند که به صورت های زیر تعیین می شوند:

• auto: حالت پیش فرض است و به این معنی است که مرورگر مقدار ارتفاع و عرض را اندازه می گیرد.
• lenght: مقادیری که با مقیاس های px، cm و … تعیین می شود.
• %: درصدی از المان محتوا

به مثال زیر دقت کنید، در این مثال برای height از px و برای width از % استفاده شده است:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

در مثال زیر برای ارتفاع و عرض عناصر در css در مقیاس پیکسل، مقداردهی شده است:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

نکته: خصوصیات height و width شامل margin ، border ، padding نمی شود و فضای درون آن ها را در بر می گیرد.

max-width

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

• none: حالت پیش فرض است و به این معنی است حداکثر عرض وجود ندارد.
• lenght: مقادیری که با مقیاس های px، cm و … تعیین می شود.
• %: درصدی از المان محتوا

در مثالی که عرض المان را برابر ۵۰۰ پیکسل تعریف کردیم، این مشکل وجود دارد که اگر عرض پنجره از مقدار ۵۰۰px کمتر شود، مرورگر یک اسکرول بار افقی به صفحه اضاف می کند. مانند آن چه در تصویر زیر مشاهده می کنید:

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

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

نکته: اگر برای المانی هر دو خصوصیت max-width و width مقداردهی شود، max-width به عنوان عرض تعیین می شود.
برگرفته از وب سایت w3schools