بعد از یادگیری Box Model، یکی از اولین نیازهای ما در طراحی صفحات وب این است که بتوانیم اندازه عناصر را کنترل کنیم. مثلاً ممکن است بخواهیم یک کارت دقیقاً ۳۰۰ پیکسل عرض داشته باشد، یک تصویر بیشتر از عرض صفحه نشود، یک بخش حداقل ۲۰۰ پیکسل ارتفاع داشته باشد یا یک محتوای متنی بیش از حد عریض نشود. CSS برای انجام این کار مجموعه‌ای از ویژگی‌های مربوط به اندازه دارد که مهم‌ترین آن‌ها width، height، min-width، max-width، min-height و max-height هستند.

در مقاله قبلی با Box Model آشنا شدیم و دیدیم که اندازه یک عنصر فقط به width و height محدود نمی‌شود و Padding و Border نیز می‌توانند روی اندازه نهایی آن تأثیر بگذارند. حالا می‌خواهیم دقیق‌تر یاد بگیریم که چطور اندازه عناصر را تعیین و محدود کنیم و چرا در طراحی صفحات وب معمولاً نباید همه چیز را با یک اندازه ثابت طراحی کنیم.

Width چیست؟

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

ساده‌ترین مثال:

.box {
    width: 300px;
}

در حالت معمول content-box، مقدار width عرض بخش Content را مشخص می‌کند و Padding و Border جداگانه به آن اضافه می‌شوند. اگر box-sizing: border-box داشته باشیم، Width شامل Content، Padding و Border خواهد بود.

مثلاً:

<div class="box">
    این یک جعبه است.
</div>

.box {
    width: 300px;
    background-color: lightgray;
}

در این حالت عرض Content برابر با ۳۰۰ پیکسل است.

واحدهای مختلف برای Width

همان‌طور که در مقاله واحدهای اندازه‌گیری CSS یاد گرفتیم، می‌توانیم از واحدهای مختلفی استفاده کنیم.

استفاده از px

.box {
    width: 300px;
}

در این حالت عرض مقدار مشخصی دارد.

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

.box {
    width: 50%;
}

درصد معمولاً نسبت به عرض فضای والد محاسبه می‌شود.

مثلاً:

<div class="container">
    <div class="box">
        محتوای من
    </div>
</div>

.container {
    width: 800px;
}

.box {
    width: 50%;
}

در این مثال عرض .box برابر با ۴۰۰ پیکسل خواهد بود.

Container = 800px

┌──────────────────────────────────────┐
│                                      │
│      Box = 50% = 400px               │
│      ┌──────────────────┐            │
│      │                  │            │
│      └──────────────────┘            │
│                                      │
└──────────────────────────────────────┘

Width با auto

یکی از مقدارهای مهم width، مقدار auto است:

.box {
    width: auto;
}

auto به مرورگر اجازه می‌دهد اندازه را بر اساس شرایط Layout و فضای موجود تعیین کند.

در بسیاری از عناصر Block، وقتی Width را به‌صورت صریح تعیین نمی‌کنیم، مرورگر اندازه مناسب را با توجه به فضای موجود و قوانین Layout محاسبه می‌کند.

بنابراین لازم نیست همیشه برای هر عنصر width تعیین کنیم.

Height چیست؟

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

مثلاً:

.box {
    height: 200px;
}

حالا ارتفاع Content Box برابر با ۲۰۰ پیکسل خواهد بود، مگر اینکه box-sizing یا سایر ویژگی‌های مرتبط با Box Model نحوه محاسبه را تغییر دهند.

مثال:

<div class="box">
    محتوای جعبه
</div>

.box {
    width: 300px;
    height: 200px;
    background-color: #ddd;
}

نتیجه:

┌──────────────────────────────┐
│                              │
│                              │
│          Content             │ 200px
│                              │
│                              │
└──────────────────────────────┘
            300px

تفاوت Width و Height

تفاوت این دو بسیار ساده است:

width
↓
عرض

height
↓
ارتفاع

مثلاً:

.box {
    width: 400px;
    height: 200px;
}

یعنی:

عرض:    400px
ارتفاع: 200px

مشکل Height ثابت

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

مثلاً:

.box {
    height: 100px;
}

اما اگر داخل آن متن زیادی قرار دهیم:

<div class="box">
    این متن بسیار طولانی است و ممکن است فضای بیشتری از
    ارتفاع تعیین شده برای این عنصر نیاز داشته باشد.
    در چنین شرایطی باید رفتار عنصر را به دقت بررسی کنیم.
</div>

ممکن است محتوا از فضای تعیین‌شده خارج شود یا با نحوه نمایش مورد انتظار شما هماهنگ نباشد.

به همین دلیل در بسیاری از موارد، بهتر است برای محتوای متغیر به جای height ثابت از روش‌هایی استفاده کنیم که اجازه رشد طبیعی عنصر را بدهند.

ارتفاع خودکار و محتوای متغیر

فرض کنید یک کارت مقاله داریم:

.article {
    width: 400px;
    height: 200px;
}

اگر یک مقاله کوتاه باشد، شاید مشکلی ایجاد نشود.

اما اگر متن مقاله طولانی باشد، ۲۰۰ پیکسل ممکن است کافی نباشد.

در چنین شرایطی معمولاً بهتر است ارتفاع را به‌صورت ثابت تعیین نکنیم:

.article {
    width: 400px;
}

در این حالت ارتفاع عنصر می‌تواند متناسب با محتوای آن تعیین شود.

این موضوع در طراحی صفحات وب بسیار مهم است؛ زیرا محتوای واقعی سایت همیشه دقیقاً یک اندازه ندارد.

Min-Width چیست؟

ویژگی min-width حداقل عرضی را تعیین می‌کند که عنصر اجازه دارد داشته باشد.

مثلاً:

.box {
    min-width: 300px;
}

یعنی عنصر نباید از ۳۰۰ پیکسل کوچک‌تر شود.

اگر فضای بیشتری وجود داشته باشد، عنصر می‌تواند بزرگ‌تر باشد.

مثلاً:

.box {
    min-width: 300px;
}

ممکن است در شرایط مختلف عرض عنصر چنین باشد:

فضای موجود: 500px
عرض عنصر:   500px

یا:

فضای موجود: 300px
عرض عنصر:   300px

اما اگر فضای قابل استفاده کمتر از حداقل تعیین‌شده باشد، ممکن است عنصر نتواند به همان اندازه کوچک شود و نیاز به بررسی Overflow یا ساختار Layout داشته باشیم.

min-width برای جلوگیری از کوچک شدن بیش از حد عناصر مفید است.

Max-Width چیست؟

max-width حداکثر عرض عنصر را تعیین می‌کند.

مثلاً:

.box {
    max-width: 800px;
}

یعنی عنصر نباید از ۸۰۰ پیکسل بزرگ‌تر شود.

این ویژگی در طراحی صفحات وب بسیار کاربردی است.

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

می‌توانیم بنویسیم:

.article {
    width: 100%;
    max-width: 800px;
}

در این حالت عنصر می‌تواند فضای موجود را استفاده کند، اما از ۸۰۰ پیکسل بزرگ‌تر نمی‌شود.

max-width یکی از ویژگی‌های بسیار مهم برای ساخت Layoutهای انعطاف‌پذیر است.

ترکیب Width و Max-Width

یکی از الگوهای بسیار مهم:

.container {
    width: 100%;
    max-width: 1200px;
}

معنای آن:

از فضای موجود استفاده کن، اما بیشتر از ۱۲۰۰ پیکسل نشو.

مثلاً:

صفحه کوچک:

┌──────────────────────────┐
│                          │
│       Container          │
│       100% width         │
│                          │
└──────────────────────────┘


صفحه بزرگ:

┌──────────────────────────────────────────────┐
│                                              │
│       ┌────────────────────────────┐         │
│       │         Container          │         │
│       │         1200px             │         │
│       └────────────────────────────┘         │
│                                              │
└──────────────────────────────────────────────┘

این الگو در بسیاری از سایت‌ها برای Container اصلی استفاده می‌شود.

Min-Height چیست؟

min-height حداقل ارتفاع یک عنصر را مشخص می‌کند.

مثلاً:

.card {
    min-height: 200px;
}

یعنی کارت حداقل ۲۰۰ پیکسل ارتفاع خواهد داشت.

اما اگر محتوای آن به فضای بیشتری نیاز داشته باشد، عنصر می‌تواند بزرگ‌تر شود.

این ویژگی برای محتوای متغیر بسیار مناسب است. MDN نیز به این موضوع اشاره می‌کند که عنصر دارای min-height می‌تواند در صورت نیاز به دلیل محتوای بیشتر، از مقدار حداقل خود بلندتر شود.

مثلاً:

.card {
    min-height: 200px;
    padding: 20px;
}

کارت حداقل ۲۰۰ پیکسل ارتفاع دارد، اما محتوای زیاد باعث نمی‌شود الزاماً در یک ارتفاع ثابت باقی بماند.

Max-Height چیست؟

max-height حداکثر ارتفاع یک عنصر را تعیین می‌کند.

مثلاً:

.box {
    max-height: 300px;
}

یعنی ارتفاع عنصر نباید از ۳۰۰ پیکسل بیشتر شود.

اما اگر محتوا بیشتر از این مقدار باشد، باید نحوه برخورد با محتوای اضافه را نیز مشخص کنیم.

اینجاست که ویژگی‌هایی مانند overflow اهمیت پیدا می‌کنند که در ادامه دوره با آن‌ها بیشتر کار خواهیم کرد.

تفاوت min و max

این چهار ویژگی را کنار هم ببینید:

min-width
حداقل عرض

max-width
حداکثر عرض

min-height
حداقل ارتفاع

max-height
حداکثر ارتفاع

مثلاً:

.box {
    min-width: 200px;
    max-width: 800px;

    min-height: 100px;
    max-height: 500px;
}

یعنی:

عرض:
حداقل 200px
حداکثر 800px

ارتفاع:
حداقل 100px
حداکثر 500px

رابطه Width با Min-Width و Max-Width

فرض کنید داریم:

.box {
    width: 500px;
    min-width: 300px;
    max-width: 700px;
}

در این شرایط Width برابر ۵۰۰ پیکسل خواهد بود، چون داخل محدوده تعیین‌شده قرار دارد.

اما اگر بنویسیم:

.box {
    width: 200px;
    min-width: 300px;
}

min-width اجازه نمی‌دهد مقدار نهایی Width کمتر از حداقل تعیین‌شده باشد. به‌عبارت ساده، min-width می‌تواند مقدار width را مجبور کند حداقل به مقدار مشخص‌شده برسد.

همین منطق درباره max-width نیز وجود دارد:

.box {
    width: 900px;
    max-width: 700px;
}

در این حالت max-width جلوی بزرگ‌تر شدن عنصر از ۷۰۰ پیکسل را می‌گیرد.

اولویت Min و Max

یک نکته مهم:

اگر چند محدودیت هم‌زمان داشته باشیم، باید رابطه آن‌ها را در نظر بگیریم.

به‌صورت ساده:

min-width
    ↓
حداقل اندازه

width
    ↓
اندازه پیشنهادی

max-width
    ↓
حداکثر اندازه

مثلاً:

.box {
    width: 500px;
    min-width: 300px;
    max-width: 700px;
}

مقدار ۵۰۰ پیکسل معتبر است، چون بین حداقل و حداکثر قرار دارد.

اما:

.box {
    width: 900px;
    max-width: 700px;
}

در اینجا مقدار نهایی نمی‌تواند از max-width بیشتر شود.

به همین ترتیب، اگر width کمتر از min-width باشد، min-width محدودیت بالاتری ایجاد می‌کند.

استفاده از Percentage برای اندازه عناصر

در طراحی وب، درصد بسیار کاربردی است.

مثلاً:

.container {
    width: 80%;
}

یعنی عنصر تقریباً ۸۰ درصد عرض فضای والد خود را استفاده کند.

مثال:

<div class="container">
    <div class="box"></div>
</div>

.container {
    width: 100%;
}

.box {
    width: 80%;
}

در اینجا .box از فضای عرضی والد خود استفاده می‌کند.

ترکیب Percentage و Max-Width

یک الگوی بسیار کاربردی:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

این کد می‌گوید:

1. Container حدود ۹۰ درصد فضای موجود را بگیرد.

2. بیشتر از ۱۲۰۰ پیکسل نشود.

3. در صورت وجود فضای مناسب، با margin: 0 auto در مرکز قرار بگیرد.

این الگو را در پروژه‌های واقعی بسیار زیاد خواهید دید.

Width: 100% همیشه به معنی «کل صفحه» نیست

این نکته مهم است.

اگر بنویسیم:

.box {
    width: 100%;
}

منظور معمولاً ۱۰۰ درصد عرض فضای مرجع یا والد است، نه الزاماً ۱۰۰ درصد عرض کل صفحه.

مثلاً:

.container {
    width: 600px;
}

.box {
    width: 100%;
}

در این مثال .box فضای ۶۰۰ پیکسلی والد را پر می‌کند.

Container
600px
┌──────────────────────────────┐
│                              │
│ Box = 100%                   │
│                              │
└──────────────────────────────┘

این موضوع درک تفاوت بین width: 100% و واحدهای Viewport مانند vw را نیز ساده‌تر می‌کند.

مشکل رایج Width: 100%

فرض کنید:

.box {
    width: 100%;
    padding: 20px;
    border: 2px solid black;
}

اگر box-sizing روی content-box باشد، Padding و Border به عرض Content اضافه می‌شوند و ممکن است عنصر از فضای والد بزرگ‌تر شود.

راه‌حل رایج:

.box {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    border: 2px solid black;
}

حالا Padding و Border داخل همان Width محاسبه می‌شوند.

مدیریت اندازه تصاویر

یکی از کاربردهای بسیار مهم max-width، کنترل اندازه تصاویر است.

فرض کنید تصویری داریم:

<img src="images/banner.jpg" alt="بنر سایت">

اگر تصویر بزرگ‌تر از فضای موجود باشد، ممکن است باعث ایجاد مشکل در Layout شود.

یک روش رایج:

img {
    max-width: 100%;
}

یعنی تصویر اجازه ندارد از عرض فضای خود بزرگ‌تر شود.

در عین حال اگر تصویر ذاتاً کوچک‌تر باشد، max-width: 100% مجبورش نمی‌کند تا بی‌دلیل بزرگ شود. MDN نیز این الگو را به‌عنوان یکی از روش‌های رایج برای جلوگیری از بزرگ‌تر شدن تصویر از فضای موجود معرفی می‌کند.

مثلاً:

img {
    max-width: 100%;
    height: auto;
}

این ترکیب برای تصاویر معمولی بسیار رایج است.

Width و Height هم‌زمان برای تصاویر

می‌توانیم بنویسیم:

img {
    width: 300px;
    height: 200px;
}

اما باید توجه داشته باشیم که اگر نسبت عرض و ارتفاع تصویر اصلی با این مقدار متفاوت باشد، تصویر ممکن است کشیده یا فشرده شود.

بنابراین همیشه نباید Width و Height را بدون توجه به نسبت تصویر تعیین کنیم.

در ادامه دوره و هنگام صحبت درباره تصاویر و Layoutهای Responsive، روش‌های مناسب‌تری برای کنترل این موضوع خواهیم دید.

اندازه طبیعی یا Intrinsic Size

برخی عناصر دارای اندازه طبیعی یا Intrinsic Size هستند.

برای مثال یک تصویر معمولاً دارای ابعاد واقعی خودش است.

اگر تصویری با اندازه:

1200 × 800

داشته باشیم، مرورگر می‌تواند این ابعاد طبیعی را در نظر بگیرد.

اما CSS می‌تواند اندازه نمایش آن را تغییر دهد:

img {
    width: 600px;
}

در این حالت اندازه نمایش تصویر تغییر کرده است، اما فایل اصلی همچنان همان تصویر ۱۲۰۰×۸۰۰ است.

به همین دلیل در طراحی وب باید بین اندازه فایل/محتوا و اندازه نمایش در صفحه تفاوت قائل شویم.

Width و Height در طراحی کارت

فرض کنید می‌خواهیم یک کارت دوره طراحی کنیم:

<div class="course-card">
    <h2>آموزش طراحی وب</h2>

    <p>
        یادگیری HTML و CSS از پایه تا طراحی صفحات حرفه‌ای.
    </p>

    <button>شروع دوره</button>
</div>

CSS:

.course-card {
    width: 100%;
    max-width: 400px;

    min-height: 250px;

    padding: 24px;

    box-sizing: border-box;

    border: 1px solid #ddd;
}

این ساختار چند ویژگی مهم دارد:

width: 100%
↓
استفاده از فضای موجود

max-width: 400px
↓
عدم بزرگ شدن بیش از حد

min-height: 250px
↓
حداقل ارتفاع

padding: 24px
↓
فضای داخلی

box-sizing: border-box
↓
کنترل بهتر اندازه نهایی

این نوع ترکیب در طراحی واقعی بسیار کاربردی است.

چرا نباید همه چیز را با px طراحی کنیم؟

ممکن است در ابتدای کار وسوسه شوید همه چیز را با مقدارهای ثابت بنویسید:

.container {
    width: 1200px;
}

.card {
    width: 350px;
}

.text {
    width: 500px;
}

اما صفحات وب روی دستگاه‌های مختلف نمایش داده می‌شوند:

• موبایل

• تبلت

• لپ‌تاپ

• مانیتور

• نمایشگرهای بزرگ

بنابراین یک اندازه ثابت همیشه مناسب نیست.

به همین دلیل در طراحی مدرن معمولاً ترکیبی از:

px
%
rem
vw
vh
min-width
max-width
min-height
max-height

و در آینده:

Flexbox
Grid
Media Query
Responsive Design

استفاده می‌کنیم.

اندازه‌گذاری با Viewport

در مقاله واحدهای CSS با vw و vh آشنا شدیم.

vw بر اساس عرض Viewport و vh بر اساس ارتفاع Viewport محاسبه می‌شود.

مثلاً:

.hero {
    width: 100vw;
    min-height: 100vh;
}

این روش می‌تواند برای بخش‌هایی که قرار است نسبت زیادی با اندازه صفحه داشته باشند مفید باشد.

البته استفاده از 100vw برای تمام Containerهای معمولی همیشه انتخاب مناسبی نیست و در بعضی Layoutها می‌تواند باعث مشکلاتی مانند ایجاد فضای افقی اضافه شود.

برای Containerهای معمولی اغلب الگوهایی مانند:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

قابل کنترل‌تر هستند.

یک پروژه عملی: Container و Card

حالا یک مثال کامل ایجاد کنیم.

HTML

<div class="container">

    <h1>دوره‌های طراحی وب</h1>

    <div class="course-card">

        <h2>HTML و CSS</h2>

        <p>
            در این دوره با اصول ساخت صفحات وب و طراحی آن‌ها
            با HTML و CSS آشنا می‌شوید.
        </p>

        <button>مشاهده دوره</button>

    </div>

</div>

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 0;
}

.course-card {
    width: 100%;
    max-width: 400px;
    min-height: 250px;

    padding: 24px;

    border: 1px solid #ddd;

    background-color: #fff;
}

.course-card h2 {
    margin-top: 0;
}

.course-card button {
    padding: 10px 18px;
}

در این مثال یک الگوی مهم برای پروژه‌های آینده خود داریم:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

این الگو به ما اجازه می‌دهد Container در صفحه‌های کوچک فضای موجود را استفاده کند، اما در صفحه‌های بسیار بزرگ بیش از حد کشیده نشود.

Width، Height و Box Model

اکنون می‌توانیم ارتباط مقاله قبلی و این مقاله را بهتر ببینیم.

فرض کنید:

.box {
    width: 300px;
    height: 200px;

    padding: 20px;
    border: 5px solid black;
}

در حالت پیش‌فرض content-box:

Content width  = 300px
Padding        = 20px + 20px
Border         = 5px + 5px

پس عرض واقعی بخش Border:

300 + 20 + 20 + 5 + 5
= 350px

و ارتفاع:

200 + 20 + 20 + 5 + 5
= 250px

اما اگر:

.box {
    box-sizing: border-box;
}

باشد، مقدار width و height شامل Content، Padding و Border می‌شود.

بنابراین:

عرض کل = 300px
ارتفاع کل = 200px

این دقیقاً همان دلیلی است که باید Box Model را قبل از کار جدی با اندازه عناصر یاد می‌گرفتیم.

نکات مهم برای مدیریت اندازه عناصر

۱. برای محتوای متغیر با Height ثابت احتیاط کنید

اگر مقدار محتوا مشخص نیست، Height ثابت ممکن است مشکل ایجاد کند.

۲. از Max-Width برای Containerها استفاده کنید

مثلاً:

.container {
    width: 90%;
    max-width: 1200px;
}

این روش باعث می‌شود محتوای سایت روی نمایشگرهای بزرگ بیش از حد کشیده نشود.

۳. برای تصاویر Max-Width را فراموش نکنید

یک الگوی رایج:

img {
    max-width: 100%;
    height: auto;
}

۴. Width: 100% را همراه با Box Model در نظر بگیرید

اگر Padding و Border دارید:

box-sizing: border-box;

می‌تواند از بسیاری از مشکلات اندازه جلوگیری کند.

۵. اندازه ثابت و انعطاف‌پذیر را ترکیب کنید

به جای:

.container {
    width: 1200px;
}

در بسیاری از مواقع:

.container {
    width: 90%;
    max-width: 1200px;
}

انعطاف‌پذیرتر است.

اشتباهات رایج

اشتباه اول: استفاده از Height ثابت برای محتوای زیاد

.card {
    height: 150px;
}

اگر محتوای کارت تغییر کند، ممکن است فضای کافی وجود نداشته باشد.

اشتباه دوم: استفاده از Width ثابت برای تمام صفحه

.container {
    width: 1200px;
}

این مقدار ممکن است روی صفحه‌های کوچک مناسب نباشد.

اشتباه سوم: استفاده نادرست از Width: 100%

.box {
    width: 100%;
    padding: 30px;
}

در حالت content-box ممکن است Padding باعث شود اندازه نهایی از فضای والد بیشتر شود.

اشتباه چهارم: نادیده گرفتن Max-Width

اگر Container بدون محدودیت در یک نمایشگر بسیار بزرگ رشد کند، متن و محتوا ممکن است بیش از حد عریض شوند.

اشتباه پنجم: فکر کردن به min و max به عنوان اندازه ثابت

مثلاً:

.box {
    min-height: 200px;
}

به معنی «ارتفاع دقیقاً ۲۰۰ پیکسل» نیست.

بلکه یعنی:

ارتفاع نباید کمتر از ۲۰۰ پیکسل باشد.

اگر محتوا فضای بیشتری نیاز داشته باشد، عنصر می‌تواند بزرگ‌تر شود.

تمرین‌های مقاله

تمرین ۱ — Width

یک div بسازید و برای آن:

width: 300px

قرار دهید.

سپس مقدار را به:

50%

تغییر دهید و تفاوت را بررسی کنید.

تمرین ۲ — Height

یک کارت با:

height: 200px;

بسازید.

سپس مقدار زیادی متن داخل آن قرار دهید و رفتار عنصر را بررسی کنید.

تمرین ۳ — Max-Width

یک Container بسازید:

.container {
    width: 90%;
    max-width: 1000px;
}

مرورگر را کوچک و بزرگ کنید و تغییر اندازه Container را مشاهده کنید.

تمرین ۴ — Min-Height

یک کارت بسازید:

.card {
    min-height: 200px;
}

ابتدا متن کوتاه داخل آن قرار دهید.

سپس متن را زیاد کنید.

مشاهده کنید که کارت چگونه می‌تواند از حداقل ارتفاع خود بزرگ‌تر شود.

تمرین ۵ — تصویر Responsive

یک تصویر در صفحه قرار دهید و بنویسید:

img {
    max-width: 100%;
    height: auto;
}

سپس اندازه پنجره مرورگر را تغییر دهید.

جمع‌بندی

ویژگی‌های اندازه‌گیری CSS به ما اجازه می‌دهند ابعاد عناصر را کنترل کنیم، اما طراحی حرفه‌ای فقط به تعیین یک Width و Height ثابت محدود نمی‌شود.

مهم‌ترین ویژگی‌هایی که در این مقاله یاد گرفتیم عبارت‌اند از:

width
height
min-width
max-width
min-height
max-height

width و height اندازه عنصر را مشخص می‌کنند، در حالی که ویژگی‌های min و max محدوده‌ای برای اندازه عنصر تعیین می‌کنند.

یکی از الگوهای بسیار کاربردی در طراحی صفحات وب این است:

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

این الگو نشان می‌دهد که در CSS مدرن معمولاً به جای اینکه همه اندازه‌ها را کاملاً ثابت تعریف کنیم، از ترکیب اندازه‌های نسبی و محدودیت‌های حداقل و حداکثر استفاده می‌کنیم.

همچنین باید همیشه ارتباط width و height با Box Model و box-sizing را در نظر داشته باشیم؛ زیرا Padding و Border می‌توانند در نحوه محاسبه اندازه نهایی عنصر تأثیر داشته باشند.

در مقالات بعدی، ویژگی‌های دیگری را یاد می‌گیریم که مستقیماً روی نحوه نمایش و فضای اشغال‌شده عناصر تأثیر می‌گذارند.