NahdaAIنهضة
HTML & CSS • المستوى الثاني • الدرس 3

نموذج الصندوق (Box Model) والهوامش

العودة لفهرس المستوى

أهداف الدرس العلمية

  • فهم المفهوم الجوهري لـ Box Model.
  • التحكم بالحشو الداخلي padding.
  • إضافة الإطارات border وحوافها المنحنية border-radius.
  • التحكم بالهوامش الخارجية margin.

1. ما هو نموذج الصندوق (Box Model)؟

في CSS، كل عنصر HTML هو صندوق يتكون من 4 طبقات متداخلة من الداخل للخارج:

1. Content (المحتوى):المحتوى الفعلي مثل النص أو الصورة.
2. Padding (الحشو الداخلي):المسافة الخالية بين المحتوى والإطار.
3. Border (الإطار):الحدود المحيطة بالحشو والمحتوى.
4. Margin (الهامش الخارجي):المسافة الفارغة بين العنصر والعناصر المجاورة.

2. تطبيق الخواص

css
.box {
  width: 300px;
  padding: 20px;             /* مسافة داخلية */
  border: 2px solid #3b82f6; /* إطار */
  margin: 30px auto;         /* هامش مع توسط */
  border-radius: 12px;       /* زوايا منحنية */
}
التطبيق العملي المباشر

تحدي الدرس الثالث: تنسيق أبعاد الصندوق

  1. إضافة padding: 25px; للصنف .box.
  2. إضافة border: 2px solid #3b82f6;.
  3. إضافة margin: 20px;.
  4. إضافة border-radius: 16px;.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 26, Col 1UTF-8Spaces: 2
383 chars