ارتفاع و عرض در CSS
جعبه را قاب می‌کنید، گرد می‌کنید و فاصلهٔ بیرونی و داخلی می‌دهید. مهارت بعدی: بگویید جعبه چقدر بزرگ باشد. width و height اندازهٔ جعبهٔ محتوا را تنظیم می‌کنند — هسته چقدر پهن و چقدر بلند باشد.
width و height چه می‌کنند؟
width اندازهٔ افقی را کنترل می‌کند. height اندازهٔ عمودی را. مقدارهای رایج با طول‌هایی مثل px یا اندازه‌های نسبی مثل % می‌آیند. اگر دست نزنید، خیلی از عنصرها از محتوا و زمینهٔ چیدمان خودشان اندازه می‌گیرند.
اندازهٔ ثابت با پیکسل
شروع روزمرهٔ واضح: به پنل عرض دقیق (و در صورت نیاز ارتفاع) به پیکسل بدهید.
عرض ثابت پیکسلی
css.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}عرض و ارتفاع با هم
وقتی طرح مستطیل قطعی می‌خواهد — قاب بندانگشتی، کاشی، جای رسانه — هر دو را بگذارید.
عرض و ارتفاع روی کاشی
css.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}عرض درصدی
عرض % معمولاً نسبت به عرض بلوک دربرگیرنده (اغلب والد) است. width: 50% یعنی «تقریباً نصف عرض والد»، نه نصف صفحه به‌صورت جادویی.
نصف عرض والد
css.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}ابزارهای اندازه‌گذاری یک‌نگاهه
علاوه بر width و height ساده، CSS نردهٔ محافظ هم می‌دهد.
📊 ابزارهای عرض و ارتفاع
| ابزار | نقش | نکتهٔ روزمره |
|---|---|---|
width / height |
اندازهٔ ترجیحی جعبهٔ محتوا | برای اندازهٔ ثابت یا روان از اینجا شروع کنید |
min-width / min-height |
از این کوچک‌تر نشو | دکمه یا سایدبار قابل‌استفاده بماند |
max-width / max-height |
از این بزرگ‌تر نشو | تصویر بزرگ یا متن پهن را نرم کنید |
auto |
بگذار مرورگر حساب کند | ارتفاع پیش‌فرض اغلب با محتوا می‌آید |
% |
نسبت به بلوک دربرگیرنده | % عرض رایج است؛ % ارتفاع به ارتفاع تعریف‌شدهٔ والد نیاز دارد |
min-width به‌عنوان کف
وقتی جعبه حتی با فشردن چیدمان باید قابل‌استفاده بماند، مفید است.
کف حداقل عرض
css.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}max-width به‌عنوان سقف
عادت کلاسیک برای متن خوانا یا تصویری که روی صفحهٔ بزرگ بی‌نهایت کش نیاید.
سقف حداکثر عرض
css.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}ارتفاع اغلب auto می‌ماند
برای بلوک متن، بگذارید ارتفاع با محتوا رشد کند. ارتفاع ثابت خیلی کوچک ممکن است متن را ببُرد مگر overflow را هم برنامه‌ریزی کنید (درس بعدتر).
ارتفاع auto با محتوا
css.article {
width: 100%;
max-width: 36rem;
height: auto; /* با پاراگراف‌ها رشد می‌کند */
padding: 1rem;
border: 1px solid #cbd5e1;
}خودتان امتحان کنید
- پنل با
width: 320pxو padding/حاشیهٔ دیدنی. - کاشی ۱۶۰×۱۲۰ با هر دو عرض و ارتفاع.
- فرزند با
width: 50%داخل والد پهن‌تر؛ والد را تغییر اندازه دهید. - به دکمه
min-width: 12remبدهید و viewport را کوچک کنید. - به بلوک متن
max-width: 40remوheight: autoبدهید — بعد ارتفاع ثابت خیلی کوچک امتحان کنید و خطر برش را ببینید.
اشتباهات رایج
height: 50%وقتی والد ارتفاع صریح ندارد (درصد ممکن است همان‌طور که فکر می‌کنید کار نکند)- قفل کردن
heightکوتاه روی جعبهٔ متن و تعجب از بریده شدن محتوا - فراموش کردن
max-widthروی تصویر بزرگ یا خط متن خیلی بلند - قاطی کردن width (اندازهٔ جعبهٔ محتوا) با padding (کوسن داخلی)
- فرض اینکه
widthهمیشه حاشیه و padding را هم شامل می‌شود — بهbox-sizingبستگی دارد (به‌زودی)
خلاصه
widthوheightجعبهٔ محتوا را اندازه می‌دهند- برای اندازهٔ ثابت
pxو برای عرض روان%نسبت به والد min-*وmax-*کف و سقف می‌گذارند- برای متن در حال رشد،
height: autoرا ترجیح بدهید - ارتفاع درصدی به والد با ارتفاع تعریف‌شده نیاز دارد
- حساب کامل جعبه (padding + حاشیه + عرض) در درس‌های بعدی باکس‌مدل می‌آید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود