تغییر اندازه طول و عرض height و width

برای تغییر اندازه ابعاد یک عنصر (طول و عرض) در صفحه از خصوصیت های CSS به شرح زیر استفاده می کنیم :

تغییر اندازه عرض :

width
max-width
min-width

تغییر اندازه ارتفاع:

height
max-height
min-height

در ادامه به توضیح خصوصیت های بالا و نحوه عملکرد ها آن ها و مقادیری که دریافت می کنند می پردازیم.

تغییر عرض عناصر:

width :
از خصوصیت width در CSS جهت تغیر اندازه عرض عنصر استفاده می شود.
مقدارهایی که width می گیرد به شرح زیر است :
 auto: با این مقدار مروگر به صورت خودکار و با توجه به محتوا اندازه عرض عنصر را تعیین می کند.
length : تعیین اندازه عرض با توجه به واحد پیکسل (px) یا نقطه (pt)
% (درصد) :  میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه عرض والد و یا عنصر در برگیرنده آن عنصر می باشد.
 

width: auto;
width: 100px;
width: 50%;

max-width :

با مقداردهی max-width در CSS شما اندازه حداکثرعرض یک عنصر در صفحه را انتخاب می کنید.
مقدارهایی که max-width می گیرد به شرح زیر است :
 none: این حالت  هيچ مقدار و محدوديتی برای عرض عنصر درنظر نمی گیرد.
length: تعیین اندازه حداکثر عرض با توجه به واحد پیکسل (px) یا نقطه (pt)
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه عرض والد و یا عنصر در برگیرنده آن عنصر حداکثر عرض آن می باشد.

min-width :
با مقداردهی min-width در CSS اندازه حداقل عرض یک عنصر در صفحه را انتخاب می شود.
مقدارهایی که min-width می گیرد به شرح زیر است :
 none: این حالت  هيچ مقدار و محدوديتی برای  حداقل عرض عنصر درنظر نمی گیرد.
length: با تعیین این مقدار حداقل عرض را بر حسب واحدی مانند پيکسل ( px ) يا نقطه ( pt ) انتخاب می کنيم .
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه عرص والد و یا عنصر در برگیرنده آن عنصر حداقل عرض آن می باشد.

تغییر اندازه ارتفاع یک عنصر در CSS :

height :
از خصوصیت height در CSS جهت تغیر اندازه ارتفاع یک عنصر استفاده می شود.
مقدارهایی که height می گیرد به شرح زیر است :
 auto: با این مقدار مروگر به صورت خودکار و با توجه به محتوا اندازه ارتفاع عنصر را تعیین می کند.
length : تعیین اندازه ارتفاع  با توجه به واحد پیکسل (px) یا نقطه (pt)
% (درصد) :  میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه ارتفاع والد و یا عنصر در برگیرنده آن عنصر می باشد.
 

height: auto;
height: 100px;
height: 50%;
max- height:

با مقداردهی max- height در CSS شما اندازه حداکثرارتفاع یک عنصر در صفحه را انتخاب می کنید.
مقدارهایی که max- height می گیرد به شرح زیر است :
none: این حالت  هيچ مقدار و محدوديتی برای ارتفاع عنصر درنظر نمی گیرد.
length:  با تعیین این مقدار حداکثر ارتفاع  را بر حسب واحدی مثل پيکسل ( px ) يا نقطه ( pt ) انتخاب می کنيم .
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه ارتفاع والد و یا عنصر در برگیرنده آن عنصر حداکثر عرض آن می باشد.

min-height :
با مقداردهی min-height در CSS اندازه حداقل ارتفاع یک عنصر در صفحه را تعیین می شود.
مقدارهایی که min-height می گیرد به شرح زیر است :
 none: این حالت  هيچ مقدار و محدوديتی برای حداقل ارتفاع عنصر درنظر نمی گیرد.
length: با تعینن این مقدار حداقل ارتفاع  را بر حسب واحدی مانند پيکسل ( px ) يا نقطه ( pt ) انتخاب می کنيم .
درصد % : میزان اندازه ای که با % درصد تعیین می شود به اندازه درصدی از اندازه ارتفاع والد و یا عنصر در برگیرنده آن عنصر حداقل ارتفاع  آن می باشد.