مدل جعبه‌ای

۱. مدل جعبه‌ای چیست

مرورگر هر عنصر HTML را به شکل یک جعبه مستطیلی می‌بیند، حتی یک کلمه ساده. این جعبه از چهار لایه تشکیل شده که از داخل به بیرون این‌طور هستند:

1. محتوا: خود متن یا تصویر.
2. فاصله داخلی یا padding: فاصله بین محتوا و خط دور جعبه.
3. حاشیه یا border: خط دور جعبه.
4. فاصله بیرونی یا margin: فاصله این جعبه تا جعبه‌های همسایه.

یک مقایسه که کار را آسان می‌کند: یک عکس قاب‌شده روی دیوار را تصور کنید. خود عکس محتوا است. حاشیه سفید دور عکس داخل قاب، padding است. خود چوب قاب، border است. و فاصله این قاب تا قاب بعدی روی دیوار، margin است.

۲. عرض و ارتفاع

.box {
    width: 300px;
    height: 150px;
    background-color: #2f4f4f;
    color: white;
}

.half {
    width: 50%;
    height: 100px;
    background-color: #ff6347;
}

عرض و ارتفاع: نمونه 01-width-height

شرح مثال

• width عرض و height ارتفاع جعبه را مشخص می‌کند.
• وقتی مقدار را با px می‌دهیم، اندازه ثابت است و هر قدر پنجره مرورگر تغییر کند، عوض نمی‌شود.
• وقتی با درصد می‌دهیم، اندازه نسبت به عنصر والد محاسبه می‌شود. width: 50% یعنی نصف عرض جعبه‌ای که این جعبه داخلش قرار دارد.

۳. حاشیه

.box1 {
    border: 2px solid #2f4f4f;
}

.box2 {
    border: 5px dashed #ff6347;
}

.box3 {
    border: 3px dotted gray;
}

.box4 {
    border-bottom: 4px solid #2f4f4f;
}

حاشیه: نمونه 02-border

شرح مثال

ویژگی border سه مقدار را با هم و در یک خط می‌گیرد:

1. ضخامت مانند 2px
2. نوع خط مانند solid
3. رنگ مانند 2f4f4f#

پرکاربردترین انواع خط:

اگر تنها یک طرف را بخواهید، از نسخه‌های جهت‌دار استفاده کنید: border-top، border-bottom، border-right و border-left. مانند box4. در مثال بالا که تنها زیرش خط دارد. این تکنیک برای زیر عنوان‌ها بسیار به کار می‌آید.

۴. فاصله داخلی

.box1 {
    padding: 20px;                    /* هر چهار طرف */
}

.box2 {
    padding: 10px 30px;               /* بالا و پایین، سپس چپ و راست */
}

.box3 {
    padding: 10px 20px 30px 40px;     /* بالا، راست، پایین، چپ */
}

.box4 {
    padding-top: 25px;
    padding-bottom: 25px;
}

فاصله داخلی: نمونه‌های 03-padding و 03-padding2

شرح مثال

padding بسته به تعداد عددهایی که می‌دهید، رفتار متفاوتی دارد. این قاعده برای margin هم دقیقاً همین است:

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

۵. فاصله بیرونی

.card {
    margin: 20px;
    background-color: white;
    padding: 15px;
}

.center-box {
    width: 400px;
    margin: 0 auto;                   /* وسط‌چین کردن جعبه */
}

.spaced {
    margin-bottom: 30px;
}

فاصله بیرونی: نمونه 04-margin

شرح مثال

margin از نظر نوشتاری دقیقاً مانند padding است، اما یک قابلیت ویژه دارد که بسیار به کار می‌آید:

margin: 0 auto; یعنی «فاصله بالا و پایین صفر، و فاصله چپ و راست را خودت به طور مساوی تقسیم کن». نتیجه‌اش وسط‌چین شدن خود جعبه است. این کلاسیک‌ترین روش وسط‌چین کردن یک جعبه در CSS است، اما حتماً باید عرض جعبه مشخص باشد، وگرنه کار نمی‌کند.

۶. گرد کردن گوشه‌ها

.rounded {
    border-radius: 10px;
}

.more-rounded {
    border-radius: 25px;
}

.pill {
    border-radius: 50px;
    padding: 10px 25px;
}

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

گردی گوشه‌ها: نمونه 05-border-radius

شرح مثال

• border-radius با مقدار پیکسلی، گوشه‌ها را به همان اندازه گرد می‌کند. عدد بزرگ‌تر یعنی گوشه گردتر.
• border-radius: 50% حالت ویژه‌ای است: جعبه را کاملاً دایره می‌کند. به شرطی که عرض و ارتفاع برابر باشند، وگرنه بیضی می‌شود.
• برای ساختن دکمه‌های قرصی‌شکل، یک عدد بزرگ مانند 50px بدهید.

نکته جالب اینکه برای گرد کردن گوشه‌ها اصلاً لازم نیست جعبه border داشته باشد. نام ویژگی گمراه‌کننده است، اما border-radius روی رنگ پس‌زمینه و تصویر هم اثر می‌گذارد. دایره‌ای کردن عکس پروفایل دقیقاً با همین یک خط انجام می‌شود.

۷. box-sizing و حل یک مشکل قدیمی

این بخش کوتاه است اما یکی از مهم‌ترین بخش‌های کل کتاب است. فرض کنید این کد را می‌نویسید:

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}

عرض واقعی این جعبه روی صفحه چند پیکسل است؟ شهود می‌گوید ۲۰۰. اما جواب ۲۵۰ است. چون به طور پیش‌فرض، مرورگر padding و border را به عرض اضافه می‌کند:

۲۰۰ محتوا، به‌علاوه ۲۰ پیکسل padding از هر طرف که می‌شود ۴۰، به‌علاوه ۵ پیکسل حاشیه از هر طرف که می‌شود ۱۰. جمعاً ۲۵۰ پیکسل.

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

* {
    box-sizing: border-box;
}

حل مشکل: نمونه 06-box-sizing

شرح مثال

علامت ستاره یعنی «همه عنصرهای صفحه» و در فصل پنجم کامل معرفی می‌شود. مقدار border-box به مرورگر می‌گوید: «وقتی می‌گویم عرض ۲۰۰ پیکسل، یعنی عرض کل جعبه شامل padding و border باید ۲۰۰ باشد. خودت محتوا را کوچک‌تر کن تا این عدد رعایت شود.»

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

شروع استاندارد هر فایل CSS از این به بعد

دو خط اول، فاصله‌های پیش‌فرضی را که مرورگر خودش به عنوان‌ها و پاراگراف‌ها می‌دهد صفر می‌کنند، تا کنترل کامل فاصله‌ها دست خودمان باشد.

۸. نمونه نهایی فصل

<body>
    <div class="card">
        <h2>دوره طراحی وب</h2>
        <p>پانزده جلسه آموزش عملی HTML و CSS</p>
        <p class="price">۵۰۰ هزار تومان</p>
    </div>

    <div class="card">
        <h2>دوره جاوااسکریپت</h2>
        <p>بیست جلسه برنامه‌نویسی سمت کاربر</p>
        <p class="price">۷۰۰ هزار تومان</p>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    font-family: Tahoma, sans-serif;
    padding: 40px;
}

.card {
    width: 400px;
    margin: 0 auto 25px auto;
    padding: 25px 30px;
    background-color: white;
    border: 1px solid #dddddd;
    border-top: 4px solid #ff6347;
    border-radius: 10px;
}

.card h2 {
    color: #2f4f4f;
    margin-bottom: 12px;
}

.card p {
    color: #666666;
    margin-bottom: 8px;
}

.price {
    color: #ff6347;
    font-size: 20px;
    padding-top: 12px;
    border-top: 1px solid #eeeeee;
}

نمونه نهایی فصل: نمونه 07-final-example

شرح مثال

در این کارت، هر پنج ویژگی این فصل نقشی دارند:

• width: 400px عرض کارت را ثابت می‌کند و margin: 0 auto 25px auto آن را وسط‌چین می‌کند و بیست و پنج پیکسل هم از کارت بعدی فاصله می‌گیرد. چون چهار مقدار داده‌ایم، ترتیبشان بالا، راست، پایین، چپ است.
• padding: 25px 30px به محتوا فضا می‌دهد. بیست و پنج از بالا و پایین، سی از چپ و راست.
• دو خط border پشت سر هم آمده‌اند. اول یک حاشیه نازک دور تا دور، بعد تنها بالای کارت با یک خط نارنجی ضخیم بازنویسی شده است. چون خط دوم پایین‌تر نوشته شده، برای لبه بالا برنده می‌شود. این یک تکنیک بسیار رایج در طراحی کارت است.
• border-radius: 10px گوشه‌ها را نرم می‌کند.
• کلاس price با یک خط بالای خودش، از بقیه متن جدا شده است. padding-top باعث می‌شود قیمت به آن خط نچسبد.

و مهم‌تر از همه، چون box-sizing: border-box را در بالای فایل نوشته‌ایم، عرض کارت دقیقاً ۴۰۰ پیکسل است، نه ۴۶۲ پیکسل که با احتساب padding و border به دست می‌آمد.

خلاصه فصل