مدل جعبه‌ای

درک مدل جعبه‌ای و فضابندی در CSS

فهرست مطالب

مقدمه اجزای مدل جعبه‌ای Padding و Margin

ویژگی‌های Border Display و Visibility تمرین عملی

دنیای جعبه‌های جادویی

هر عنصر HTML یک جعبه است!

تصور کنید هر عنصر در صفحه وب مثل یک جعبه است! این جعبه‌ها دارای محتوا، حاشیه داخلی، حاشیه و فاصله خارجی هستند. درک این مفهوم کلید موفقیت در طراحی وب است! 📦

مدل جعبه‌ای (Box Model) قلب CSS است. وقتی این مفهوم را بفهمید، طراحی صفحات وب برایتان مثل بازی خواهد بود!

حقیقت جالب:

مدل جعبه‌ای در CSS از ابتدای وب وجود داشته، اما تا سال‌ها بعد استانداردسازی نشده بود و مرورگرها متفاوت رفتار می‌کردند!

اجزای مدل جعبه‌ای

هر عنصر HTML از چهار لایه تشکیل شده است. مثل پیاز که لایه‌های مختلف دارد! 🧅

اجزای Box Model

/* مثال کامل Box Model */
.my-box {
    /* محتوا */
    width: 200px;
    height: 100px;
    
    /* حاشیه داخلی (Padding) */
    padding: 20px;
    
    /* حاشیه (Border) */
    border: 5px solid #3b82f6;
    
    /* فاصله خارجی (Margin) */
    margin: 15px;
    
    /* رنگ پس‌زمینه برای نمایش بهتر */
    background-color: #fef3c7;
}

نمایش در مرورگر:

محتوای جعبه

اجزای Box Model:

• Content: محتوای اصلی (متن، تصویر و...)
• Padding: فضای خالی داخل عنصر
• Border: حاشیه دور عنصر
• Margin: فضای خالی خارج از عنصر

Padding و Margin

Padding فضای داخلی و Margin فضای خارجی عنصر است. مثل فاصله بین مبل و دیوار! 🛋️

Padding (حاشیه داخلی)

انواع Padding

/* همه طرف‌ها یکسان */
.box1 { padding: 20px; }

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

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

/* بالا، راست، پایین، چپ */
.box4 { padding: 10px 15px 20px 25px; }

/* هر طرف جداگانه */
.box5 {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

Margin (حاشیه خارجی)

انواع Margin

/* همه طرف‌ها یکسان */
.element1 { margin: 20px; }

/* بالا-پایین و چپ-راست */
.element2 { margin: 10px 20px; }

/* وسط چین کردن */
.center { margin: 0 auto; }

/* حذف margin */
.no-margin { margin: 0; }

/* margin منفی */
.overlap { margin-top: -10px; }

نمایش در مرورگر:

Padding مختلف:

padding: 5px

padding: 15px

padding: 25px

Margin مختلف:

margin: 5px

margin: 15px

margin: 25px

تگ‌های جدید:

• <caption>: عنوان جدول
• <thead>: سربرگ جدول
• <tbody>: بدنه جدول
• <tfoot>: پاورقی جدول
• colspan: ادغام ستون‌ها

ویژگی‌های Border

Border مثل قاب عکس است که دور عنصرها می‌کشیم. می‌توانیم ضخامت، رنگ و نوع آن را تغییر دهیم! 🖼️

Border Width (ضخامت)

border-width

.box {
    border-width: 2px;     /* همه طرف‌ها */
    border-width: 1px 3px; /* بالا-پایین | چپ-راست */
    border-width: 1px 2px 3px 4px; /* بالا | راست | پایین | چپ */
    
    /* یا جداگانه */
    border-top-width: 5px;
    border-right-width: 3px;
    border-bottom-width: 2px;
    border-left-width: 1px;
}

نمایش:

1px

3px

5px

Border Style (نوع)

border-style

.box {
    border-style: solid;   /* خط ممتد */
    border-style: dashed;  /* خط چین */
    border-style: dotted;  /* نقطه‌ای */
    border-style: double;  /* دوخطه */
    border-style: groove;  /* فرورفته */
    border-style: ridge;   /* برجسته */
    border-style: inset;   /* داخلی */
    border-style: outset;  /* خارجی */
}

نمایش:

solid

dashed

dotted

double

Border Color و Border Radius

border-color & border-radius

.colorful-box {
    border: 3px solid red;
    border-color: red blue green orange; /* بالا | راست | پایین | چپ */
    border-radius: 10px; /* گوشه‌های گرد */
    padding: 15px;
}

.circle {
    border: 2px solid #3b82f6;
    border-radius: 50%; /* دایره کامل */
    width: 80px;
    height: 80px;
}

نمایش:

رنگی و گرد

دایره

Display و Visibility

این ویژگی‌ها کنترل می‌کنند که عنصرها چگونه نمایش داده شوند یا اصلاً نمایش داده شوند یا نه! 👁️

Display Property

display

.element {
    display: block;        /* بلوک (عرض کامل) */
    display: inline;       /* درون‌خطی */
    display: inline-block; /* ترکیبی */
    display: flex;         /* فلکس */
    display: grid;         /* گرید */
    display: none;         /* مخفی (بدون جا) */
}

نمایش:

Block Element

Inline Elements

Inline Block

Visibility Property

visibility

.element {
    visibility: visible;   /* قابل مشاهده */
    visibility: hidden;    /* مخفی (جا می‌گیرد) */
    visibility: collapse;  /* فقط برای جدول */
}

/* تفاوت display: none و visibility: hidden */
.display-none {
    display: none;         /* مخفی + بدون جا */
}

.visibility-hidden {
    visibility: hidden;    /* مخفی + جا می‌گیرد */
}

نمایش:

عنصر قابل مشاهده

عنصر مخفی (جا می‌گیرد)

عنصر بعدی

توجه: عنصر قرمز مخفی است اما جایش محفوظ است

مثال عملی: منوی کشویی

dropdown-menu

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;              /* ابتدا مخفی */
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.dropdown:hover .dropdown-menu {
    display: block;             /* با hover نمایش */
}

نمایش:

منو (موس را روی من بگذارید)

تمرین عملی

حالا وقت ساختن یک جدول برنامه هفتگی است!

📝 تمرین:

یک کارت محصول زیبا بسازید که شامل موارد زیر باشد:

• عرض: 300px و ارتفاع: 400px
• padding داخلی: 20px
• margin خارجی: 15px
• border: 2px solid با رنگ آبی
• border-radius: 10px برای گوشه‌های گرد
• تصویر محصول، عنوان، توضیحات و قیمت
• استفاده از display: flex برای چیدمان

جواب تمرین

این یکی از راه‌های حل این تمرین است:

product-card.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>کارت محصول</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="product-card">
        <div class="product-image">
            <img src="laptop.jpg" alt="لپ‌تاپ">
        </div>
        <div class="product-content">
            <h2 class="product-title">لپ‌تاپ گیمینگ</h2>
            <p class="product-description">
                لپ‌تاپ قدرتمند برای بازی و کار با پردازنده 
                قوی و کارت گرافیک مدرن
            </p>
            <div class="product-price">
                <span class="price">۲۵,۰۰۰,۰۰۰</span>
                <span class="currency">تومان</span>
            </div>
            <button class="buy-button">خرید محصول</button>
        </div>
    </div>
</body>
</html>

styles.css

/* Box Model برای کارت محصول */
.product-card {
    width: 300px;
    height: 400px;
    margin: 15px;
    padding: 20px;
    border: 2px solid #3b82f6;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

.product-image {
    width: 100%;
    height: 150px;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #e0e0e0;
}

.product-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.product-description {
    margin: 0 0 15px 0;
    padding: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    flex-grow: 1;
}

.product-price {
    margin: 10px 0;
    padding: 8px 0;
    border-top: 1px solid #e0e0e0;
}

.price {
    font-size: 20px;
    font-weight: bold;
    color: #e74c3c;
}

.currency {
    font-size: 14px;
    color: #666;
    margin-right: 5px;
}

.buy-button {
    margin: 10px 0 0 0;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.buy-button:hover {
    background: #2563eb;
}

نکات مهم:

• Box Model شامل content، padding، border و margin است
• از box-sizing: border-box برای محاسبه آسان‌تر استفاده کنید
• margin برای فاصله خارجی و padding برای فاصله داخلی
• border-radius برای گوشه‌های گرد و زیبا
• display: flex برای چیدمان انعطاف‌پذیر عنصرها

درس قبلی: متن و فونت‌ها

درس ۴ از ۶

درس بعدی: چیدمان و موقعیت‌یابی