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; /* زوايا منحنية */
} التطبيق العملي المباشر
تحدي الدرس الثالث: تنسيق أبعاد الصندوق
- إضافة
padding: 25px;للصنف.box. - إضافة
border: 2px solid #3b82f6;. - إضافة
margin: 20px;. - إضافة
border-radius: 16px;.
محرر الأكواد — HTML
14px
جارٍ تهيئة البيئة...
المخرجات — المخرجات
الكونسول (Console)
13px
nahda@runner — html
0 lines
(لا يوجد إخراج)
HTMLLn 26, Col 1UTF-8Spaces: 2
383 chars