از CSS heightو widthخصوصیات برای تنظیم قد و عرض یک عنصر استفاده می شود.

از max-widthویژگی CSS برای تنظیم حداکثر عرض یک عنصر استفاده می شود.


CSS تنظیم طول و عرض

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

خصوصیات ارتفاع و عرض شامل بالشتک ، حاشیه یا حاشیه نیست. ارتفاع / عرض ناحیه داخل بالشتک ، حاشیه و حاشیه عنصر را تنظیم می کند.


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

heightو widthخواص ممکن است مقادیر زیر را داشته باشد:

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

مثالها از طول و عرض CSS

مثال

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

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

مثال

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

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

توجه: به یاد داشته باشید که ویژگی ها heightو widthموارد شامل padding ، حاشیه یا حاشیه نیستند! آنها ارتفاع / عرض ناحیه داخل بالشتک ، حاشیه و حاشیه عنصر را تنظیم می کنند!



تنظیم حداکثر عرض

از این max-widthویژگی برای تنظیم حداکثر عرض یک عنصر استفاده می شود.

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

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

استفاده در max-widthعوض ، در این شرایط باعث بهبود عملکرد مرورگر در پنجره های کوچک می شود.

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

توجه: اگر به هر دلیلی هم از widthمال و هم از max-widthمال در یک عنصر استفاده می کنید ، و ارزش widthملک از ملک بزرگتر max-widthاست. از max-widthاموال استفاده خواهد شد (و از این widthویژگی چشم پوشی می شود).

مثال

این عنصر <div> دارای ارتفاع 100 پیکسل و حداکثر عرض 500 پیکسل است:

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

منبع