حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
آموزش CSS از صفر؛ طراحی صفحه با Flexbox و Grid

آموزش width و max-width در CSS؛ محدودکردن عرض کارت

اندازه و نمایش عنصرها در CSS · 0٪

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

توی مثال، عرض درخواستی ۴۰۰ پیکسله ولی سقف ۲۸۰ اجازه بزرگ‌ترشدن نمی‌ده. توی تمرین والد یک عرض ثابت داره تا نتیجه در پیش‌نمایش ۶۴۰ در ۴۸۰ دقیق و قابل مقایسه باشه. خطای رایج اینه که width رو ۳۰۰ بنویسیم و max-width رو حذف کنیم؛ ظاهر فعلی شبیه می‌شه اما نقش سقف از بین می‌ره. از روی کد هدف هر دو تصمیم رو بیان کن. اینجا padding و border روی کارت صفر هستن تا محاسبه اندازه با بحث مدل جعبه قاطی نشه و تنها محدودیت عرض رو بررسی کنیم.

✍️ مثال حل‌شده:

<div class="limit">محدود</div>
<style>.limit { width:400px; max-width:280px; }</style>

حالا نوبت توئه: داخل .holder با عرض ۴۰۰ پیکسل، کارت .limited باید width:100% و max-width:300px و box-sizing:border-box داشته باشد. عرض محاسبه‌شده کارت باید ۳۰۰ پیکسل شود. عرض والد را تغییر نده و برای کارت padding یا border اضافه نکن.

فعالیت شما

داخل .holder با عرض ۴۰۰ پیکسل، کارت .limited باید width:100% و max-width:300px و box-sizing:border-box داشته باشد. عرض محاسبه‌شده کارت باید ۳۰۰ پیکسل شود. عرض والد را تغییر نده و برای کارت padding یا border اضافه نکن.

مطالعهٔ این گام برای همه آزاد است

برای پاسخ‌دادن، بررسی پاسخ، ثبت پیشرفت و استفاده از دستیار باید شرایط شرکت در فعالیت‌ها را داشته باشید.

برای انجام فعالیت وارد شوید

برای انجام فعالیت‌ها ابتدا این دوره‌های پیش‌نیاز را تکمیل کنید:

کد اولیهٔ فعالیت

<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>تمرین CSS</title></head>
<body>
<div class="holder"><article class="limited">کارت با سقف عرض</article></div>
</body>
</html>

ظاهر صفحه (CSS)

body{margin:0;padding:16px;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:#1f2937;background:#f3f4f6}*{box-sizing:content-box}
.holder{width:400px}.limited{width:100%;background:white;/* سقف و نوع جعبه */}