Box Model ونموذج الصندوق في CSS: دليل شامل لفهم التخطيط

Box Model ونموذج الصندوق في CSS: دليل شامل لفهم التخطيط

دليل تخصصي من علاء عامر – مطور ومصمم مواقع وتطبيقات محترف

فهم Box Model هو الأساس لإتقان CSS. تعلم كيفية التحكم في أبعاد العناصر، المسافات، والتخطيط بدقة مهنية.

1️⃣ مفهوم Box Model الأساسي

مكونات الصندوق الأربعة

/* مثال توضيحي للـ Box Model */
.box-model-demo {
  /* المحتوى - Content */
  width: 300px;
  height: 200px;

  /* الحشو - Padding (مسافة داخلية) */
  padding: 20px;

  /* الحدود - Border */
  border: 5px solid #007bff;

  /* الهوامش - Margin (مسافة خارجية) */
  margin: 30px;

  /* خصائص إضافية للتوضيح */
  background-color: #f8f9fa;
  color: #333;
}

/* 
العرض الإجمالي للعنصر = 
width (300) + padding-left (20) + padding-right (20) + 
border-left (5) + border-right (5) + margin-left (30) + margin-right (30)
= 410px (العنصر نفسه) + 60px (الهوامش الخارجية)
*/

أنواع Box Model

/* الوضع الافتراضي - content-box */
.content-box {
  box-sizing: content-box; /* الافتراضي */
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  /* العرض الفعلي = 300 + 40 + 10 = 350px */
}

/* الوضع البديل - border-box */
.border-box {
  box-sizing: border-box; /* الأفضل للتطوير */
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  /* العرض الفعلي = 300px بالضبط */
}

/* تطبيق border-box على كامل الموقع */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* أو باستخدام وراثة أكثر مرونة */
html {
  box-sizing: border-box;
}

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

2️⃣ التحكم في الأبعاد (Width & Height)

وحدات القياس المختلفة

.dimension-units {
  /* وحدات مطلقة */
  width: 300px; /* بكسل */
  width: 2in; /* إنش */
  width: 5cm; /* سنتيمتر */
  width: 20pt; /* نقطة */

  /* وحدات نسبية */
  width: 50%; /* نسبة من العنصر الأب */
  width: 20em; /* نسبة من حجم خط العنصر */
  width: 15rem; /* نسبة من حجم خط الجذر */

  /* وحدات viewport */
  width: 50vw; /* 50% من عرض الشاشة */
  width: 30vh; /* 30% من ارتفاع الشاشة */
  width: 25vmin; /* 25% من أصغر بُعد */
  width: 20vmax; /* 20% من أكبر بُعد */
}

/* الحد الأدنى والأقصى للأبعاد */
.responsive-dimensions {
  /* الحد الأدنى والأقصى للعرض */
  width: 100%;
  min-width: 250px; /* أصغر عرض مسموح */
  max-width: 800px; /* أكبر عرض مسموح */

  /* الحد الأدنى والأقصى للارتفاع */
  height: auto;
  min-height: 400px; /* أصغر ارتفاع مسموح */
  max-height: 600px; /* أكبر ارتفاع مسموح */
}

/* أبعاد متجاوبة باستخدام clamp() */
.modern-responsive {
  /* العرض: الحد الأدنى 250px، المفضل 50%، الأقصى 800px */
  width: clamp(250px, 50%, 800px);

  /* حجم الخط المتجاوب */
  font-size: clamp(1rem, 2.5vw, 2rem);

  /* الحشو المتجاوب */
  padding: clamp(1rem, 5vw, 3rem);
}

نسبة العرض إلى الارتفاع

/* نسبة ثابتة باستخدام aspect-ratio */
.aspect-ratio-modern {
  width: 100%;
  aspect-ratio: 16/9; /* نسبة 16:9 */
  aspect-ratio: 1; /* مربع */
  aspect-ratio: 4/3; /* نسبة كلاسيكية */
}

/* نسبة ثابتة بالطريقة التقليدية */
.aspect-ratio-classic {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 9/16 * 100% = 56.25% للنسبة 16:9 */
}

.aspect-ratio-classic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* حاوي للصور مع نسبة ثابتة */
.image-container {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

3️⃣ الحشو (Padding) - المسافة الداخلية

طرق تطبيق الـ Padding

/* طرق مختلفة لتعريف الحشو */
.padding-examples {
  /* قيمة واحدة لكل الجهات */
  padding: 20px;

  /* قيمتان: عمودي وأفقي */
  padding: 20px 30px; /* أعلى/أسفل يسار/يمين */

  /* ثلاث قيم: أعلى، أفقي، أسفل */
  padding: 10px 20px 30px;

  /* أربع قيم: أعلى، يمين، أسفل، يسار */
  padding: 10px 20px 30px 40px;
}

/* تحديد كل جهة منفصلة */
.padding-individual {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

/* حشو منطقي للدعم متعدد الاتجاهات */
.padding-logical {
  padding-block-start: 10px; /* أعلى */
  padding-block-end: 10px; /* أسفل */
  padding-inline-start: 20px; /* بداية النص */
  padding-inline-end: 20px; /* نهاية النص */

  /* أو باختصار */
  padding-block: 10px; /* أعلى وأسفل */
  padding-inline: 20px; /* يسار ويمين */
}

استخدامات عملية للـ Padding

/* أزرار بحشو متوازن */
.btn {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 18px;
}

/* كروت بحشو متدرج */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e9ecef;
}

.card-body {
  padding: 24px;
}

.card-footer {
  padding: 16px 24px 20px;
  background: #f8f9fa;
}

/* حقول الإدخال */
.form-group {
  margin-bottom: 20px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-input:focus {
  border-color: #007bff;
  outline: none;
}

/* قوائم التنقل */
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  border-bottom: 1px solid #eee;
}

.nav-link {
  display: block;
  padding: 16px 20px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s ease;
}

.nav-link:hover {
  background-color: #f8f9fa;
}

4️⃣ الهوامش (Margin) - المسافة الخارجية

إدارة الهوامش

/* طرق تطبيق الهوامش */
.margin-examples {
  /* نفس قواعد الـ padding */
  margin: 20px; /* كل الجهات */
  margin: 20px 30px; /* عمودي وأفقي */
  margin: 10px 20px 30px; /* أعلى، أفقي، أسفل */
  margin: 10px 20px 30px 40px; /* أعلى، يمين، أسفل، يسار */
}

/* القيم التلقائية والسالبة */
.margin-special {
  margin: auto; /* توسيط أفقي */
  margin: 0 auto; /* توسيط أفقي مع إزالة الهوامش العمودية */
  margin: -10px; /* هوامش سالبة */
}

/* حل مشكلة انهيار الهوامش */
.margin-collapse-fix {
  /* إضافة حد شفاف لمنع الانهيار */
  border-top: 1px solid transparent;

  /* أو استخدام padding بدلاً من margin */
  padding-top: 20px;

  /* أو استخدام overflow */
  overflow: hidden;
}

أنماط الهوامش الشائعة

/* نظام الهوامش المتدرج */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: 0.25rem;
} /* 4px */
.m-2 {
  margin: 0.5rem;
} /* 8px */
.m-3 {
  margin: 0.75rem;
} /* 12px */
.m-4 {
  margin: 1rem;
} /* 16px */
.m-5 {
  margin: 1.5rem;
} /* 24px */
.m-6 {
  margin: 2rem;
} /* 32px */
.m-8 {
  margin: 3rem;
} /* 48px */

/* هوامش اتجاهية */
.mt-4 {
  margin-top: 1rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-4 {
  margin-left: 1rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* هوامش سالبة للتداخل الإبداعي */
.negative-margins {
  margin-top: -20px; /* سحب العنصر لأعلى */
  margin-left: -15px; /* سحب العنصر لليسار */
}

/* توسيط العناصر */
.center-horizontal {
  margin: 0 auto;
  max-width: 800px;
}

.center-vertical {
  margin: auto 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

5️⃣ الحدود (Borders)

أنماط الحدود الأساسية

/* خصائص الحدود الأساسية */
.border-basics {
  /* حد شامل */
  border: 2px solid #333;

  /* تحديد كل خاصية منفصلة */
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* أنماط مختلفة للحدود */
.border-styles {
  border-style: solid; /* خط صلب */
  border-style: dashed; /* خط متقطع */
  border-style: dotted; /* نقاط */
  border-style: double; /* خط مزدوج */
  border-style: groove; /* محفور */
  border-style: ridge; /* مرتفع */
  border-style: inset; /* غائر */
  border-style: outset; /* بارز */
}

/* حدود لكل جهة منفصلة */
.individual-borders {
  border-top: 3px solid #007bff;
  border-right: 2px dashed #28a745;
  border-bottom: 1px solid #dc3545;
  border-left: 4px solid #ffc107;
}

/* الزوايا المدورة */
.rounded-corners {
  border-radius: 8px; /* كل الزوايا */
  border-radius: 10px 20px; /* أعلى-يسار/أسفل-يمين و أعلى-يمين/أسفل-يسار */
  border-radius: 10px 20px 30px; /* أعلى-يسار، أعلى-يمين/أسفل-يسار، أسفل-يمين */
  border-radius: 5px 10px 15px 20px; /* كل زاوية منفصلة */
}

/* زوايا متقدمة */
.advanced-corners {
  border-top-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 0;
}

تأثيرات حدود إبداعية

/* حدود متدرجة */
.gradient-border {
  position: relative;
  background: white;
  padding: 20px;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
  border-radius: 12px;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: subtract;
}

/* حدود متحركة */
.animated-border {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
  animation: border-spin 3s linear infinite;
}

@keyframes border-spin {
  0% {
    background:
      linear-gradient(white, white) padding-box,
      linear-gradient(0deg, #ff6b6b, #4ecdc4) border-box;
  }
  100% {
    background:
      linear-gradient(white, white) padding-box,
      linear-gradient(360deg, #ff6b6b, #4ecdc4) border-box;
  }
}

/* ظلال الحدود */
.border-glow {
  border: 2px solid #007bff;
  box-shadow:
    0 0 5px rgba(0, 123, 255, 0.3),
    0 0 10px rgba(0, 123, 255, 0.2),
    0 0 15px rgba(0, 123, 255, 0.1);
  transition: box-shadow 0.3s ease;
}

.border-glow:hover {
  box-shadow:
    0 0 10px rgba(0, 123, 255, 0.5),
    0 0 20px rgba(0, 123, 255, 0.3),
    0 0 30px rgba(0, 123, 255, 0.2);
}

/* حدود نقطية مخصصة */
.custom-dotted {
  border: none;
  border-top: 3px dashed #333;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 10h100' stroke='%23333' stroke-width='3' stroke-dasharray='10,5'/%3E%3C/svg%3E")
    3;
}

6️⃣ مشروع عملي: نظام بطاقات متقدم

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>نظام البطاقات المتقدم</title>
    <link rel="stylesheet" href="card-system.css" />
  </head>
  <body>
    <div class="container">
      <header class="page-header">
        <h1 class="page-title">معرض المشاريع</h1>
        <p class="page-subtitle">مجموعة متنوعة من أعمالنا المميزة</p>
      </header>

      <main class="cards-grid">
        <!-- بطاقة مشروع عادية -->
        <article class="card">
          <div class="card-image">
            <img src="project1.jpg" alt="مشروع التجارة الإلكترونية" />
            <div class="card-badge">جديد</div>
          </div>
          <div class="card-content">
            <h3 class="card-title">متجر إلكتروني متكامل</h3>
            <p class="card-description">
              منصة تجارة إلكترونية حديثة مع نظام دفع آمن وإدارة محتوى متقدمة
            </p>
            <div class="card-tags">
              <span class="tag">Laravel</span>
              <span class="tag">React</span>
              <span class="tag">MySQL</span>
            </div>
          </div>
          <div class="card-footer">
            <div class="card-stats">
              <span class="stat"> <strong>120</strong> مستخدم </span>
              <span class="stat"> <strong>4.8</strong> تقييم </span>
            </div>
            <a href="#" class="card-button">عرض التفاصيل</a>
          </div>
        </article>

        <!-- بطاقة مميزة -->
        <article class="card card-featured">
          <div class="card-image">
            <img src="project2.jpg" alt="تطبيق إدارة المشاريع" />
            <div class="card-badge badge-premium">مميز</div>
          </div>
          <div class="card-content">
            <h3 class="card-title">تطبيق إدارة المشاريع</h3>
            <p class="card-description">
              نظام شامل لإدارة المشاريع والفرق مع أدوات التعاون والتتبع المتقدمة
            </p>
            <div class="card-tags">
              <span class="tag">Vue.js</span>
              <span class="tag">Node.js</span>
              <span class="tag">MongoDB</span>
            </div>
          </div>
          <div class="card-footer">
            <div class="card-stats">
              <span class="stat"> <strong>500+</strong> مستخدم </span>
              <span class="stat"> <strong>5.0</strong> تقييم </span>
            </div>
            <a href="#" class="card-button">عرض التفاصيل</a>
          </div>
        </article>

        <!-- بطاقة مع صورة جانبية -->
        <article class="card card-horizontal">
          <div class="card-image">
            <img src="project3.jpg" alt="موقع شركة" />
          </div>
          <div class="card-body">
            <div class="card-content">
              <h3 class="card-title">موقع شركة احترافي</h3>
              <p class="card-description">
                موقع شركة متعدد الصفحات مع تصميم احترافي ونظام إدارة محتوى
              </p>
              <div class="card-tags">
                <span class="tag">WordPress</span>
                <span class="tag">PHP</span>
              </div>
            </div>
            <div class="card-footer">
              <a href="#" class="card-button">عرض الموقع</a>
            </div>
          </div>
        </article>

        <!-- بطاقة إحصائيات -->
        <article class="card card-stats">
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">50+</div>
              <div class="stat-label">مشروع مكتمل</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">98%</div>
              <div class="stat-label">رضا العملاء</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">5</div>
              <div class="stat-label">سنوات خبرة</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">24/7</div>
              <div class="stat-label">دعم فني</div>
            </div>
          </div>
        </article>

        <!-- بطاقة اتصال -->
        <article class="card card-contact">
          <div class="card-content">
            <h3 class="card-title">هل لديك مشروع؟</h3>
            <p class="card-description">
              تواصل معنا لنناقش مشروعك ونحوله إلى حقيقة
            </p>
          </div>
          <div class="card-footer">
            <a href="#" class="card-button card-button-primary"
              >ابدأ مشروعك الآن</a
            >
          </div>
        </article>
      </main>
    </div>
  </body>
</html>

/* card-system.css */
:root {
  --primary: #007bff;
  --primary-dark: #0056b3;
  --secondary: #6c757d;
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #17a2b8;

  --gray-50: #fafafa;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  --white: #ffffff;
  --black: #000000;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  --border-radius: 12px;
  --border-radius-sm: 6px;
  --border-radius-lg: 16px;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
}

/* إعادة تعيين شاملة */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, var(--gray-50) 0%, #e3f2fd 100%);
  color: var(--gray-800);
  line-height: 1.6;
  min-height: 100vh;
}

/* الحاوي الرئيسي */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* رأس الصفحة */
.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--primary), #667eea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.25rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* شبكة البطاقات */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  align-items: start;
}

/* البطاقة الأساسية */
.card {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid var(--gray-200);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* صورة البطاقة */
.card-image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.card:hover .card-image img {
  transform: scale(1.05);
}

/* شارة البطاقة */
.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--primary);
  color: var(--white);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: 2;
}

.badge-premium {
  background: linear-gradient(135deg, var(--warning), #ff9800);
}

/* محتوى البطاقة */
.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.card-description {
  color: var(--gray-600);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* علامات التصنيف */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--gray-300);
}

/* ذيل البطاقة */
.card-footer {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* إحصائيات البطاقة */
.card-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.stat {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.stat strong {
  color: var(--primary);
}

/* زر البطاقة */
.card-button {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  border: 1px solid var(--gray-300);
}

.card-button:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.card-button-primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.card-button-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* البطاقة المميزة */
.card-featured {
  position: relative;
  border: 2px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, var(--primary), #667eea) border-box;
}

.card-featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--primary), #667eea);
  z-index: 3;
}

/* البطاقة الأفقية */
.card-horizontal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  max-width: 100%;
}

.card-horizontal .card-image {
  aspect-ratio: 1;
}

.card-horizontal .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-horizontal .card-content {
  flex-grow: 1;
}

/* بطاقة الإحصائيات */
.card-stats {
  background: linear-gradient(135deg, var(--primary), #667eea);
  color: var(--white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* بطاقة الاتصال */
.card-contact {
  background: linear-gradient(135deg, var(--success), #20c997);
  color: var(--white);
  text-align: center;
}

.card-contact .card-title {
  color: var(--white);
}

.card-contact .card-description {
  color: rgba(255, 255, 255, 0.9);
}

.card-contact .card-button {
  background: var(--white);
  color: var(--success);
  border-color: var(--white);
}

.card-contact .card-button:hover {
  background: var(--gray-100);
  transform: translateY(-2px);
}

/* التصميم المتجاوب */
@media (max-width: 768px) {
  .container {
    padding: 1rem 0.5rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .card-horizontal {
    grid-template-columns: 1fr;
  }

  .card-horizontal .card-image {
    aspect-ratio: 16/10;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }

  .card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .card-stats {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .card-content,
  .card-footer {
    padding: 1rem;
  }

  .card-footer {
    padding-top: 0;
  }
}

الخلاصة

في هذا الدرس تعلمنا:

✅ مفهوم Box Model الأساسي وأنواعه ✅ التحكم في الأبعاد والوحدات المختلفة
✅ إدارة الحشو (Padding) والمسافات الداخلية ✅ التحكم في الهوامش (Margin) والمسافات الخارجية ✅ تصميم الحدود والتأثيرات الإبداعية ✅ مشروع عملي متقدم لنظام البطاقات

في الدرس القادم سنستكشف Display وأنماط العرض لفهم كيفية التحكم في سلوك العناصر وتخطيطها.

📩 هل تحتاج مساعدة في Box Model؟