📐 درس سوم: مدل جعبه (Box Model)

🎯 هدف این درس: آشنایی با مدل جعبه و نحوه مدیریت فاصله‌ها و حاشیه‌ها

سلام دوست عزیز! 👋

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

توی این درس، با هم یاد می‌گیریم:

✅ مدل جعبه و چهار بخش اصلی آن
✅ فاصله داخلی (Padding)
✅ حاشیه (Border)
✅ فاصله خارجی (Margin)
✅ تمرین: طراحی کارت‌های محصول

📦 بخش ۱: مدل جعبه چیست؟

در CSS، هر عنصر یک جعبه (Box) است که از چهار بخش تشکیل شده:

📊 بخش‌های مدل جعبه

محتوا (Content): متن یا تصویر داخل عنصر
فاصله داخلی (Padding): فاصله بین محتوا و حاشیه
حاشیه (Border): خط دور عنصر
فاصله خارجی (Margin): فاصله بین عنصر و عناصر دیگر

محتوای عنصر

فاصله داخلی (Padding)

حاشیه (Border)

فاصله خارجی (Margin)

📏 بخش ۲: فاصله داخلی (Padding)

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

🎨
Padding

CSS
v3


<style>
    .box {
        background: #DBEAFE;
        border: 2px solid #2563EB;
        padding: 20px;  /* فاصله داخلی ۲۰ پیکسل از همه طرف */
        margin: 10px;
    }

    /* Padding جداگانه برای هر طرف */
    .box2 {
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
    }

    /* Padding به صورت مختصر */
    .box3 {
        padding: 10px 20px;  /* بالا/پایین = ۱۰px، چپ/راست = ۲۰px */
    }

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

💡 نکته مهم:

وقتی از padding استفاده می‌کنید، اندازه کلی عنصر بزرگ‌تر می‌شود. مثلاً اگر عرض ۲۰۰px داشته باشد و padding ۲۰px بگیرد، عرض نهایی ۲۴۰px می‌شود.

🖼️ بخش ۳: حاشیه (Border)

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

🎨
Border

CSS
v3


<style>
    .border-solid {
        border: 2px solid #2563EB;
    }

    .border-dashed {
        border: 2px dashed #DC2626;
    }

    .border-dotted {
        border: 2px dotted #059669;
    }

    .border-radius {
        border: 3px solid #7C3AED;
        border-radius: 12px;  /* گوشه‌های گرد */
    }

    .border-only-right {
        border-right: 4px solid #F59E0B;
    }
</style>

📏 بخش ۴: فاصله خارجی (Margin)

فاصله خارجی، فضای بین عنصر و عناصر اطراف آن است.

🎨
Margin

CSS
v3


<style>
    .margin-all {
        margin: 20px;  /* ۲۰ پیکسل از همه طرف */
    }

    .margin-sides {
        margin: 10px 20px;  /* بالا/پایین = ۱۰px، چپ/راست = ۲۰px */
    }

    .margin-auto {
        margin: 0 auto;  /* وسط‌چین کردن */
        max-width: 400px;
    }
</style>

⚠️ تفاوت Padding و Margin

Padding فاصله داخلی (بین محتوا و حاشیه) است، اما Margin فاصله خارجی (بین عنصر و عناصر دیگر) است.

📝 بخش ۵: پروژه عملی – طراحی کارت‌های محصول

📝 پروژه: کارت‌های محصول

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

🔍 راه‌حل پروژه:

🎨
کارت‌های محصول

CSS
v3


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>کارت‌های محصول</title>
    <style>
        body {
            font-family: "Vazir", "Arial", sans-serif;
            background: #f8fafc;
            padding: 40px;
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .product-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            width: 250px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #e2e8f0;
        }

        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.12);
        }

        .product-image {
            width: 100%;
            height: 180px;
            background: #e2e8f0;
            border-radius: 12px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

        .product-title {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #0f172a;
        }

        .product-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: #2563EB;
            margin-bottom: 15px;
        }

        .btn-buy {
            background: #2563EB;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s;
        }

        .btn-buy:hover {
            background: #1D4ED8;
        }
    </style>
</head>
<body>

    <!-- کارت ۱ -->
    <div class="product-card">
        <div class="product-image">📘</div>
        <h3 class="product-title">دوره پایتون</h3>
        <div class="product-price">۴۹۹,۰۰۰ تومان</div>
        <button class="btn-buy">🛒 خرید دوره</button>
    </div>

    <!-- کارت ۲ -->
    <div class="product-card">
        <div class="product-image">🌐</div>
        <h3 class="product-title">دوره HTML</h3>
        <div class="product-price">۱۹۹,۰۰۰ تومان</div>
        <button class="btn-buy">🛒 خرید دوره</button>
    </div>

    <!-- کارت ۳ -->
    <div class="product-card">
        <div class="product-image">🎨</div>
        <h3 class="product-title">دوره CSS</h3>
        <div class="product-price">۲۹۹,۰۰۰ تومان</div>
        <button class="btn-buy">🛒 خرید دوره</button>
    </div>

</body>
</html>

📝 تمرین‌های عملی

🎯 تمرین شماره ۱

یک باکس با padding 30px، border 3px solid #2563EB و margin 20px طراحی کنید.

🎯 تمرین شماره ۲

یک صفحه با سه کارت خبری طراحی کنید که هر کارت دارای padding، border و margin مناسب باشد.

🧩 جمع‌بندی درس

تبریک می‌گم! 🎉 توی این درس یاد گرفتی:

✅ مدل جعبه و چهار بخش اصلی آن
✅ فاصله داخلی (padding) و نحوه استفاده از آن
✅ حاشیه (border) و انواع آن
✅ فاصله خارجی (margin) و کاربردهای آن
✅ طراحی کارت‌های محصول با مدل جعبه

🎯 برای درس بعدی آماده‌اید؟

در درس بعدی، با Flexbox آشنا می‌شیم و یاد می‌گیریم چطور عناصر رو به‌صورت منظم در کنار هم بچینیم.

🔗 لینک‌های مرتبط

⬅️
درس قبل: رنگ‌ها و فونت‌ها

🚀
درس بعدی: Flexbox

🏠
صفحه دوره‌ها

نویسنده تیم رجستری

تاریخ انتشار 20 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

مدل جعبه (Box Model)