سی‌اس‌اس/عرض و ارتفاع

رنگ

عرض و ارتفاع

margin

عرض و ارتفاع

ویژگی‌های width (عرض) و height (ارتفاع) در CSS برای تعیین اندازهٔ عناصر HTML استفاده می‌شوند. این ویژگی‌ها پایه‌ای‌ترین ابزارها برای طراحی دقیق و منظم در صفحات وب هستند و نقش اساسی در ساختار چیدمان، ریسپانسیو بودن، و طراحی سازگار با انواع دستگاه‌ها دارند.

تعریف

width: تعیین عرض عنصر
height: تعیین ارتفاع عنصر

این ویژگی‌ها می‌توانند مقدارهای مختلفی مانند پیکسل (px)، درصد (%)، em، vw، vh و ... بپذیرند.

نحوه استفاده

width: 300px;
height: 200px;

مثال ساده

<div style="width: 300px; height: 200px; background-color: lightblue;">
    یک جعبه با عرض ۳۰۰ و ارتفاع ۲۰۰ پیکسل
</div>

واحدهای متداول

واحد	توضیح
`px`	پیکسل – مقدار دقیق و ثابت
`%`	درصد نسبت به عنصر والد
`em` / `rem`	وابسته به اندازه فونت – مناسب طراحی مقیاس‌پذیر
`vw`	درصدی از عرض پنجره مرورگر (View Width)
`vh`	درصدی از ارتفاع پنجره مرورگر (View Height)

مقدارهای خاص

auto — مقدار پیش‌فرض، که به محتوای عنصر بستگی دارد.
inherit — مقدار را از عنصر والد به ارث می‌برد.
max-content — عنصر تا جایی که محتوا نیاز دارد، گسترش می‌یابد.
min-content — عنصر تا حداقل فضای ممکن برای محتوا کوچک می‌شود.
fit-content — تلاش برای متناسب‌سازی محتوا با عرض/ارتفاع

ارتفاع خودکار

اگر height تعیین نشود، ارتفاع عنصر بلاک به اندازهٔ محتوای آن خواهد بود.

<div style="width: 300px; background: #eee;">
    <p>ارتفاع این div با محتوا تغییر می‌کند.</p>
</div>

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

برای کنترل بهتر روی اندازه می‌توان از min-width، max-width، min-height، max-height استفاده کرد:

max-width: 100%;
min-height: 100px;

مثال: تصویر با عرض واکنش‌گرا

<img src="image.jpg" style="width: 100%; max-width: 500px;" alt="نمونه تصویر">

↑ تصویر در صفحه‌های کوچک، کاملاً واکنش‌گرا می‌شود اما از ۵۰۰px بزرگ‌تر نمی‌شود.

تعامل با Box Model

مقدار width و height فقط فضای محتوای عنصر را تعیین می‌کنند. اگر padding، border یا margin داشته باشیم، اندازه کلی عنصر بزرگ‌تر خواهد بود.

برای تغییر این رفتار می‌توان از ویژگی box-sizing استفاده کرد:

box-sizing: border-box;

↑ با این تنظیم، padding و border در داخل width و height حساب می‌شوند.

نمایش flex و grid

در layoutهای مدرن مانند Flexbox و Grid، رفتار width و height وابسته به تنظیمات والد است.

<div style="display: flex;">
    <div style="flex: 1; min-height: 100px;">...</div>
    <div style="width: 200px;">...</div>
</div>

توجه به محتواهای دینامیک

در طراحی مدرن، محتوای متغیر (مثل متن کاربران، تصاویر آپلودی و ...) نیاز به استفاده از max-width و overflow دارد تا از شکست چیدمان جلوگیری شود.

width: 100%;
max-width: 600px;
overflow: auto;

تاثیر در سئو

در طراحی موبایل‌فرندلی، تنظیم درست عرض با واحدهای نسبی و عدم استفاده از fixed width برای همه‌چیز باعث کاهش scroll افقی و بهبود تجربه کاربری می‌شود که در سئو تاثیر مستقیم دارد.

تمرین: ساخت یک جعبه واکنش‌گرا

<div style="width: 90%; max-width: 800px; margin: auto; padding: 1rem; background-color: #f0f0f0;">
    این باکس در موبایل کوچک‌تر و در دسکتاپ حداکثر ۸۰۰px خواهد بود.
</div>

جمع‌بندی

تنظیم width و height به‌درستی، نه‌تنها ظاهر زیباتری ایجاد می‌کند بلکه به تجربه کاربری، طراحی واکنش‌گرا، و حتی سئو کمک می‌کند. استفادهٔ درست از واحدهای نسبی، محدودیت‌های حداقلی و حداکثری، و درک رفتار box-sizing از الزامات یک طراح حرفه‌ای CSS است.

مطالعهٔ بیشتر: