نموذج الصندوق - Content box

الخطوات العملية:

• صندوق المحتوى (الأبعاد الداخلية): مساحة محتوى الصندوق.
• صندوق الحشو: مساحة إضافية حول المحتوى لزيادة المسافة بينه والحافة.
• صندوق الإطار: حدود حول المحتوى، وإذا تم ضبطها، يتم إضافتها إلى عرض المحتوى الكلي.
• صندوق الهامش: مساحة خارج الصندوق تمتد إلى حواف العنصر الخارجي.

مثال CSS للتوضيح:

.box {
  width: 200px;  /* عرض صندوق المحتوى */
  padding: 10px;  /* مساحة حشو حول المحتوى */
  border: 5px solid black;  /* حدود حول المحتوى */
  margin: 15px;  /* مساحة هامش خارج الصندوق */
}

المفاهيم الأساسية:

• صندوق المحتوى: يحتوي على محتوى العنصر (نص، صور، إلخ).
• صندوق الحشو: يضيف مساحة إضافية حول المحتوى، مما يزيد من المسافة بينه وبين الإطار.
• صندوق الإطار: يحيط بالمحتوى ويؤثر على عرضه الكلي.
• صندوق الهامش: يوفر مسافة بين العنصر والعناصر المجاورة له.

ملاحظة للناطقين بالعربية:

• يُشار أيضًا إلى الحشو باسم "التبطين".
• تُسمى حدود "إطار".
• يُشار إلى الهامش باسم "الهوامش".