عرض و ارتفاع در CSS

با استفاده از ویژگی‌های width (عرض) و height (ارتفاع) می‌توان اندازه‌ی عناصر HTML را در CSS کنترل کرد. این دو ویژگی از پرکاربردترین ابزارها برای تعیین اندازه و چیدمان عناصر در صفحه هستند.

ویژگی‌ width

ویژگی width عرض یک عنصر را مشخص می‌کند. مقدار آن می‌تواند بر حسب واحدهایی مانند پیکسل (px) یا درصد (%) نوشته شود.

div{
    width: 300px; 
}

در این مثال، عرض عنصر div برابر 300px تنظیم شده است.

ویژگی height

ویژگی height ارتفاع یک عنصر را مشخص می‌کند و مانند width می‌تواند بر حسب پیکسل یا درصد نوشته شود.

div{
    height: 150px 10px 25px 10px; 
}

در این مثال، ارتفاع عنصر div برابر 150px تنظیم شده است.

استفاده از واحد درصد

هنگامی‌که مقدار width یا height بر حسب درصد نوشته شود، اندازه‌ی آن نسبت به عنصر والد (Parent) محاسبه می‌شود.

div{
    width: 50%;
}

در این مثال، عرض عنصر div برابر با نصف عرض عنصر والدش تنظیم می‌شود.

حداقل و حداکثر اندازه

علاوه بر width و height، می‌توان با ویژگی‌های زیر محدوده‌ی مجاز برای اندازه‌ی یک عنصر را نیز تعیین کرد:

• min-width: حداقل عرض مجاز
• max-width: حداکثر عرض مجاز
• min-height: حداقل ارتفاع مجاز
• max-height: حداکثر ارتفاع مجاز

div{
    width: 80%;
    min-width: 400px;
}

در این مثال، عرض عنصر div برابر 80% عرض والدش است، اما هرگز نمی‌تواند از 400px بیشتر شود.

تأثیر box-sizing بر اندازه‌ی نهایی

به‌طور پیش‌فرض، مقادیر Padding و Border به اندازه‌ی نهایی width و height اضافه می‌شوند. با تنظیم ویژگی box-sizing روی مقدار border-box، می‌توان این رفتار را تغییر داد تا Padding و Border داخل همان عرض و ارتفاع تعیین‌شده محاسبه شوند.

div{
    width: 300px; 
    padding: 20px; 
    border: 2px solid black; 
    box-sizing: border-box; 
}

در این مثال، با وجود تعریف Padding و Border، عرض نهایی عنصر div همچنان 300px باقی می‌ماند.