عرض و ارتفاع

آشنایی با width و height در CSS، min/max-width و واحدهای اندازه‌گیری

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

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

ویژگی‌های اصلی

ویژگیتوضیح
widthعرض عنصر
heightارتفاع عنصر
min-widthحداقل عرض
max-widthحداکثر عرض ⭐
min-heightحداقل ارتفاع
max-heightحداکثر ارتفاع

مقادیر width و height

مقدارتوضیح
autoخودکار (پیش‌فرض) — محتوا تعیین می‌کند
عدد + واحد200px، 50%، 10em
fit-contentاندازه متناسب با محتوا
min-contentکوچک‌ترین اندازه ممکن
max-contentبزرگ‌ترین اندازه محتوا

واحدهای اندازه‌گیری

واحدنوعتوضیح
pxمطلق۱ پیکسل صفحه
%نسبیدرصد از عنصر والد
emنسبینسبت به فونت عنصر
remنسبینسبت به فونت ریشه (html)
vwنسبی۱٪ عرض ویوپورت
vhنسبی۱٪ ارتفاع ویوپورت
vminنسبیکوچک‌ترین ویوپورت
vmaxنسبیبزرگ‌ترین ویوپورت

اهمیت max-width ⭐

استفاده از max-width به‌جای width یکی از مهم‌ترین اصول ریسپانسیو است:

/* ❌ بد — در موبایل سرریز می‌کند */
    .container {
        width: 1200px;
    }
    
    /* ✅ خوب — خود را با صفحه تطبیق می‌دهد */
    .container {
        max-width: 1200px;
        width: 100%;
    }

min-width و max-width با هم

.fluid-box {
        width: 100%;
        min-width: 300px;  /* کوچک‌تر از این نمی‌شود */
        max-width: 800px;  /* بزرگ‌تر از این نمی‌شود */
    }

ارتفاع (height)

⚠️ تنظیم height معمولاً توصیه نمی‌شود — بگذارید محتوا تعیین کند:

/* ❌ بد — ارتفاع ثابت */
    .card {
        height: 300px;  /* اگر محتوا بیشتر شود سرریز می‌کند */
    }
    
    /* ✅ خوب — اجازه دهید محتوا رشد کند */
    .card {
        min-height: 200px;  /* حداقل ارتفاع */
        /* max-height هم می‌توان اضافه کرد */
    }

ارتفاع تمام صفحه (100vh)

.hero {
        height: 100vh;  /* کل ارتفاع صفحه */
        /* یا */
        height: 100dvh;  /* dynamic viewport height (مدرن) */
    }

width در عناصر مختلف

عنصررفتار پیش‌فرض
block (div, p)۱۰۰٪ عرض والد
inline (span, a)به اندازه محتوا — width بی‌تأثیر
inline-blockقابل تنظیم width/height
flex itemبر اساس flex rules

ویژگی‌های sizing مدرن

/* متناسب با محتوا */
    .box {
        width: fit-content;  /* به اندازه محتوای داخلش */
    }
    
    /* حداقل سایز محتوا */
    .min-box {
        width: min-content;  /* کوتاه‌ترین کلمه */
    }
    
    /* حداکثر سایز محتوا */
    .max-box {
        width: max-content;  /* بدون شکستن خط */
    }

توابع min()، max()، clamp()

/* min — کوچک‌تر را انتخاب می‌کند */
    .box {
        width: min(100%, 600px);
        /* در موبایل ۱۰۰٪، در دسکتاپ ۶۰۰px */
    }
    
    /* max — بزرگ‌تر را انتخاب می‌کند */
    .text {
        font-size: max(16px, 2vw);
        /* حداقل ۱۶px، در صفحه بزرگ بیشتر */
    }
    
    /* clamp(min, ideal, max) ⭐ */
    .title {
        font-size: clamp(1rem, 5vw, 3rem);
        /* حداقل ۱rem، ایده‌آل ۵vw، حداکثر ۳rem */
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط