ارتفاع و پهنا CSS

عرض این عنصر ۱۰۰ درصد است.

CSS برای تنظیم ارتفاع و عرض

height و width این属性 برای تنظیم ارتفاع و عرض یک عنصر استفاده می‌شود.

属性的 height و width شامل مارژین داخلی، لبه‌ها و مارژین خارجی نیست. آن‌ها مارژین داخلی، لبه‌ها و مارژین خارجی را تنظیم می‌کنند که در آن‌ها قرار می‌گیرد.

مقادیر CSS ارتفاع و عرض

height و width این属性 می‌تواند مقادیر زیر را تنظیم کند:

  • auto - پیش‌فرض. مرورگر ارتفاع و عرض را محاسبه می‌کند.
  • length - ارتفاع/عرض با استفاده از px، cm و غیره تعریف می‌شود.
  • % - ارتفاع/عرض با استفاده از درصد یک بلوک تعریف می‌شود.
  • initial - ارتفاع/عرض به مقدار پیش‌فرض تنظیم می‌شود.
  • inherit - ارتفاع/عرض از مقدار پدر آن ارث می‌برد.

مثال‌های CSS ارتفاع و عرض

ارتفاع این عنصر 200 پیکسل و عرض آن 50% است.

مثال

ارتفاع و عرض یک عنصر <div> را تنظیم کنید:

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

خودتان امتحان کنید

ارتفاع این عنصر 100 پیکسل و عرض آن 500 پیکسل است.

مثال

ارتفاع و عرض یک عناصر دیگر <div> را تنظیم کنید:

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

خودتان امتحان کنید

توجه:به یاد داشته باشید کهheight و width این属性 شامل مارژین داخلی، لبه‌ها یا مارژین خارجی نیست! آن‌ها مارژین داخلی، لبه‌ها و مارژین خارجی را تنظیم می‌کنند که در آن‌ها قرار می‌گیرد.

تنظیم max-width

max-width این属性 برای تنظیم عرض بیشترین یک عنصر استفاده می‌شود.

مقدار max-width (عرض بیشترین) را می‌توان با استفاده از مقادیر طول (مثلاً px، cm و غیره) یا درصد عرض یک بلوک (％) مشخص کرد، یا آن را به none (مقدار پیش‌فرض) تنظیم کرد که معنایش این است که هیچ عرض بیشتری وجود ندارد.

وقتی که پنجره مرورگر کوچکتر از عرض عنصر (500 پیکسل) باشد، آن مشکلی که قبلاً ذکر شد رخ می‌دهد <div> مشکلات استفاده می‌شود. سپس مرورگر یک نوار اسکرول افقی به صفحه اضافه می‌کند.

در این حالت، از max-width می‌تواند عملکرد مرورگر در پنجره‌های کوچک‌تر را بهبود بخشد.

توجه:برای مشاهده تفاوت بین دو div، پنجره مرورگر را به عرض کمتر از 500 پیکسل بکشید!

ارتفاع این عنصر 100 پیکسل و عرض بیشترین آن 500 پیکسل است.

ارتفاع این عنصر 100 پیکسل و عرض بیشترین آن 500 پیکسل است.

نکته:max-width مقدار این属性 width(عرض).

مثال

ارتفاع این عنصر <div> 100 پیکسل و عرض بیشترین آن 500 پیکسل است:

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

خودتان امتحان کنید

مثال‌های بیشتر

تنظیم ارتفاع و عرض یک عنصر
این مثال نشان می‌دهد که چگونه می‌توان ارتفاع و عرض مختلف عناصر را تنظیم کرد.
با استفاده از درصد ارتفاع و عرض یک تصویر را تنظیم کنید
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از درصد، ارتفاع و عرض یک تصویر را تنظیم کرد.
تنظیم عرض کمترین و بیشترین یک عنصر
این مثال نشان می‌دهد که چگونه می‌توان با استفاده از مقادیر پیکسل، عرض کمترین و بیشترین یک عنصر را تنظیم کرد.
تنظیم ارتفاع کمینه و بیشینه عناصر
این مثال نشان می‌دهد که چگونه می‌توان ارتفاع کمینه و بیشینه عناصر را با استفاده از مقادیر پیکسلی تنظیم کرد.

تنظیم اندازه CSS

ویژگی توضیح
height تنظیم ارتفاع عناصر.
max-height تنظیم ارتفاع بیشینه عناصر.
max-width تنظیم عرض بیشینه عناصر.
min-height تنظیم ارتفاع کمینه عناصر.
min-width تنظیم عرض کمینه عناصر.
width تنظیم عرض عناصر.