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

شرح النموذج:

• Content (المحتوى): المنطقة الزرقاء في الوسط، يتم تحديد حجمها بواسطة width و height.
• Padding (الحشوة): المساحة الشفافة حول النص وداخل الإطار (توسيع الصندوق من الداخل).
• Border (الإطار): الخط البرتقالي المحيط بالحشوة والمحتوى.
• Margin (الهامش): المساحة السوداء الشفافة خارج الإطار البرتقالي (التي تفصل هذا الصندوق عن الصناديق الأخرى المجاورة).

طرق الكتابة المختصرة (Shorthand):

• margin: 10px; (الجهات الأربع 10)
• margin: 10px 20px; (أعلى وأسفل 10 / يمين ويسار 20)
• margin: 10px 15px 20px; (أعلى 10 / يمين ويسار 15 / أسفل 20)
• margin: 10px 15px 20px 25px; (أعلى، يمين، أسفل، يسار - باتجاه عقارب الساعة)
• ونفس القاعدة تنطبق تماماً على الـ padding.

شرح الكود:

هذا المثال يوضح التطبيق العملي للخصائص المذكورة أعلاه في CSS.