آموزش ابعاد در CSS به زبان ساده با مثال کاربردی

ویژگی های بعد در CSS برای کنترل ارتفاع و عرض یک عنصر استفاده می شود.

ویژگی های ابعاد CSS

CSS چندین ویژگی مانند width (عرض)، height (ارتفاع)، max-width (حداکثر عرض) و max-height (حداکثر ارتفاع) و … را ارائه می دهد که به شما امکان می دهد ابعاد یک جعبه را کنترل کنید. در بخش زیر شیوه استفاده از این ویژگی ها برای ایجاد طرح بندی بهتر صفحه وب توضیح داده می شود.

ویژگی های عرض و ارتفاع

ویژگی های width و height، عرض و ارتفاع ناحیه محتوای یک عنصر را مشخص می کنند. مقادیر width و height شامل حاشیه ها، paddingها یا marginها نیست. شیوه محاسبه عرض و ارتفاع موثر در بخش مدل جعبه ای در CSS توضیح داده شده است.

ویژگی های width و height، می توانند مقادیر طول (px، pt، em و ..)، درصد یا کلمه کلیدی auto را بگیرد. مقادیر طول منفی مجاز نیستند.

مثال

div {
width: 300px;
height: 200px;
}

قوانین سبک تعریف شده در مثال بالا، عرض ثابت را ۳۰۰ پیکسل و ارتفاع را ۲۰۰ پیکسل برای عنصر <div> تعریف می کند.

توجه: مقدار خاص auto  به مرورگرها امکان می دهد تا عرض را به طور خودکار برای عنصر محاسبه کندن. مقادیر درصد (٪) به عرض بلوک حاوی عنصر اشاره دارد.

ویژگی max-height

ویژگیmax-height  اجازه می دهد تا حداکثر ارتفاع محتوای یک جعبه را مشخص کنید. این حداکثر ارتفاع شامل حاشیه ها paddingها یا marginها نیست.

عنصری که ویژگیmax-height  را دارد، ارتفاعش هرگز از مقدار مشخص شده بلندتر نخواهد شد، حتی اگر ویژگیheight  روی مقدار بزرگتر تنظیم شده باشد. به عنوان مثال، اگر مقدار ویژگیheight  برابر با ۲۰۰ پیکسل و مقدار ویژگیmax-height  برابر با ۱۰۰ پیکسل تنظیم شود، ارتفاع واقعی عنصر ۱۰۰ پیکسل است.

مثال

div {
height: 200px;
max-height: 100px;
}

ویژگیmax-height  معمولاً همراه با ویژگی min-height  برای تعیین محدوده ارتفاع برای عنصر مورد نظر استفاده می شود.

توجه: یک قاعده استثنا وجود دارد – اگر ویژگی min-height بزرگتر از ویژگی max-height  باشد، در این حالت، در واقع مقدار ویژگیmin-height  اعمال خواهد شد.

ویژگی min-height

ویژگیmin-height  اجازه می دهد تا حداقل ارتفاع محتوای یک بلوک را مشخص کنید. این حداقل ارتفاع شامل حاشیه ها paddingها یا marginها نیست.

یک عنصر که ویژگی min-height  به آن اعمال می شود، هرگز از حداقل ارتفاع مشخص شده کوچکتر نخواهد شد. به عنوان مثال، اگر مقدار ویژگیheight  برابر با ۲۰۰ پیکسل و مقدار ویژگی min-height  برابر با ۳۰۰ پیکسل تنظیم شود، ارتفاع واقعی عنصر ۳۰۰ پیکسل است.

مثال

div {
height: 200px;
min-height: 300px;
}

از ویژگی min-height  معمولاً همراه با ویژگی max-height  استفاده می شود تا محدوده ارتفاع را برای عنصر مورد نظر تعیین کند.

توجه: از ویژگیmin-height  معمولاً استفاده می شود تا اطمینان حاصل شود که یک عنصر حداقل یک کمینه ارتفاع را حتی در صورت عدم وجود محتوا دارد. با این وجود اگر عنصری بیش از حداقل ارتفاع تعیین شده گسترش یابد، به طور نرمال می تواند رشد کند.

ویژگی max-width

ویژگی max-width این امکان را می دهد تا حداکثر عرض محتوای یک بلوک را مشخص کنید. این حداکثر عرض شامل حاشیه ها paddingها یا marginها نیست.

عنصری که ویژگی max-width به آن اعمال شده است هرگز از مقدار تعیین شده، عریض تر نخواهد شد، حتی اگر ویژگی width بزرگتر تنظیم شده باشد. به عنوان مثال، اگر مقدار ویژگی widthبرابر با ۳۰۰ پیکسل و مقدار ویژگی max- width برابر با ۲۰۰ پیکسل تنظیم شود، عرض واقعی عنصر ۲۰۰ پیکسل خواهد بود.

مثال

div {
width: 300px;
max-width: 200px;
}

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

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

ویژگی min-width

ویژگی min-width این امکان را می دهد تا حداقل عرض محتوای یک بلوک را مشخص کنید. این حداقل عرض شامل حاشیه ها paddingها یا marginها نیست.

عنصری که ویژگی min-width به آن اعمال شده است هرگز از مقدار تعیین شده، باریک تر نخواهد شد. به عنوان مثال، اگر مقدار ویژگی widthبرابر با ۳۰۰ پیکسل و مقدار ویژگی min- width برابر با ۴۰۰ پیکسل تنظیم شود، عرض واقعی عنصر ۴۰۰ پیکسل خواهد بود.

مثال

div {
width: 300px;
min-width: 400px;
}

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

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