همانطور که حدس زده اید موضوع این مبحث کار با طول و عرض عناصر است. تقریبا می توان گفت که همه ی عناصر صفحه این ویژگی ها را می پذیرند. البته تنها دو ویژگی width و height نیست و چندین ویژگی دیگر هم بحث خواهد شد. این ویژگی ها را در زیر مشاهده می کنید:

  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width

در ادامه به توضیح هریک خواهیم پرداخت.

ویژگی های height و width

ویژگی های height و width به ترتیب ارتفاع و عرض عناصر را مشخص می کنند. این مقدار می تواند برحسب پیکسل یا درصد باشد. تاثیر این دو ویژگی را در یک عنصر div بررسی می کنیم. به قطعه کد زیر توجه کنید:

 

و

 

خروجی:

مثالی از استفاده ویژگی width و height در css

خروجی

ویژگی های color و background تنها برای مشخص بودن کار است که رنگ متن و رنگ زمینه را تعیین کرده اند.

همین مثال را به صورت درصد نیز به همراه خروجی اش در ریز می بینید:

 

خروجی:

مثالی از استفاده ویژگی width و height در css

خروجی

اگر این مقدار برحسب درصد باشد، نسبت به عنصر پدرش محاسبه می شود. و در این مثال نسبت به تمام صفحه یعنی عنصر پدر این div عنصر body است.

توجه: بهتر است تا دربعضی موارد یکی از ویژگی ها را (معمولا height) مقداردهی نکرد تا به طور خودکار مقدار داده شود و اگر متن یا محتویات مورد نظر از اندازه ی دلخواه بزرگتر بود دچار مشکل نشویم.

ویژگی های max-height و max-width

این دو ویژگی بیشترین مقدار ممکن برای عرض و ارتفاع عناصر را مشخص می کنند. معمولا زمانی از این ویژگی استفاده می شود که از محتویات داخل عنصر موردنظر اطلاع دقیقی نداریم و نمی خواهیم عرض یا ارتفاع عنصر موردنظر از حد موردنظر بیشتر شود. همچنین زمانی که از این ویژگی ها استفاده می شود، دیگر از ویژگی های height و width استفاده نمی شود.

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

به مثال زیر دقت کنید: عنصر div ما به شکل زیر می باشد:

 

و کد css مربوطه به شکل زیر نوشته شده است:

 

خروجی:

مثالی از استفاده ویژگی width و height در css

خروجی

ویژگی border فقط برای نمایش لبه های division موردنظر است.

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

ویژگی های min-height و min-width

با دانشی که تا به این جا دارید شاید با کاربرد این ویژگی ها آشنا شده باشید. دو ویژگی min-height و min-width به ترتیب کمترین مقدار ممکن برای ارتفاع و عرض عنصر موردنظر را مشخص می کنند. یعنی اگر اندازه ی واقعی عنصر کمتر از مقادیر مشخص شده در این ویژگی ها باشد، ابعاد عنصر به اندازه های مشخص شده تغییر اندازه می دهند.

به مثال زیر دقت کنید:

 

خروجی:

مثالی از استفاده ویژگی width و height در css

خروجی

در این مثال مقدار عرض -width- عنصر از کمترین مقدار ممکن –min-width-  بیشتر بود! پس مشکلی پیش نیامد و عنصر به اندازه ی مشخص شده در width نمایش داده شد. اما مقدار مشخص شده برای ارتفاع عنصر -height- از min-height کمتر بود، درنتیجه ارتفاع عنصر برابر با مقدار مشخص شده در ویژگی height شد.