درس چهارم: مدل جعبه‌ای (Box Model) – راز چیدمان در وب

در این درس از CSLearn.ir یاد می‌گیریم که چطور ابعاد عناصر را کنترل کنیم و بین آن‌ها فاصله بیندازیم. هر عنصر در HTML مانند یک جعبه است که از ۴ لایه تشکیل شده است.

📦 ۴ لایه اصلی هر عنصر

🟦 Content: محتوای اصلی (مثل متن یا عکس).
🟩 Padding: فاصله بین محتوا و لبه‌های داخلی جعبه (فاصله داخلی).
🟨 Border: خط حاشیه که دور تا دور جعبه کشیده می‌شود.
🟧 Margin: فاصله بین این جعبه با جعبه‌های دیگر (فاصله خارجی).

💻 نمونه کد برای کنترل فواصل

ببینید چطور با این ویژگی‌ها، یک دکمه یا یک کادر زیبا می‌سازیم:

.box {
    width: 300px;      /* عرض جعبه */
    padding: 20px;     /* فاصله از داخل */
    border: 2px solid; /* خط دور */
    margin: 50px;      /* فاصله از بیرون */
}

✨ گرد کردن لبه‌ها (Border Radius)

برای اینکه جعبه‌های شما از حالت تیز خارج شده و مدرن‌تر به نظر برسند، از ویژگی border-radius استفاده می‌کنیم:

div {
    border-radius: 10px; /* لبه‌های نرم */
}

🚩 تمرین سرنوشت‌ساز:

یک تگ <div> بسازید، برای آن یک رنگ پس‌زمینه انتخاب کنید و سپس سعی کنید با تغییر مقدار Padding، فضای داخل آن را زیاد کنید تا متن به لبه‌ها نچسبد.

درس قبلی

بازگشت به دوره

درس بعدی