مقالات علاء عامر

نقدم مجموعة شاملة من مقالات التعليمية الهامة في تطوير الويب لتحويل أفكارك إلى واقع رقمي

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

CSS 2026-01-01 علاء عامر

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

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

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

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;
}

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;
}

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؟

CSS Box Model Layout Padding Margin Border Web Design Frontend
قسم المقالة
CSS

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

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

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

التواصل والاستشارة

تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.

02

التخطيط والجدولة

وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.

03

البرمجة والتطوير

تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.

04

المراجعة والتسليم

ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.

علاء عامر
علاء عامر

مطور ويب محترف بخبرة تزيد عن 10 سنوات في بناء حلول رقمية مبتكرة.

مقالات ذات صلة

مقدمة CSS الشاملة: دليل المطورين من البداية للاحتراف
مقدمة CSS الشاملة: دليل المطورين من البداية للاحتراف

عرض التفاصيل

المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل
المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل

عرض التفاصيل

Display وأنماط العرض في CSS: دليل شامل للتحكم في سلوك العناصر
Display وأنماط العرض في CSS: دليل شامل للتحكم في سلوك العناصر

عرض التفاصيل

هل تحتاج هذه الخدمة؟

تواصل معي الآن للحصول على استشارة مجانية وعرض سعر

تواصل عبر واتساب رضاكم هو هدفنا الأسمى

عروض إضافية

  • صيانة وتحديث المواقع

    نحافظ على موقعك آمنًا ومحدّثًا دائمًا

  • ربط الأنظمة وواجهات البرمجة

    نربط أنظمتك بواجهات برمجية قوية ومرنة

  • تصميم وتحسين قواعد البيانات

    استعلامات أسرع وهيكلة أوضح وأخطاء أقل

  • تأمين المواقع والحماية المتقدمة

    حماية موقعك من التهديدات السيبرانية

  • أتمتة العمليات والمهام البرمجية

    نؤتمت المهام المتكررة ونوفّر وقتك دائمًا

لديك استفسار؟

اتصل بنا الآن

00201014714795

راسلنا عبر البريد الإلكتروني

[email protected]