CSS - Box Model نموذج الصندوق
CSS - نموذج الصندوق (Box Model)
🔸 نموذج الصندوق (Box Model) في CSS هو الطريقة التي يُنظر بها لكل عنصر HTML على أنه "صندوق" يحتوي على:
- المحتوى (Content): المحتوى الفعلي مثل النص أو الصورة.
- الحشوة (Padding): المساحة حول المحتوى.
- الحد (Border): الإطار المحيط بالحشوة والمحتوى.
- الهامش (Margin): المساحة خارج الحد وتُستخدم للفصل بين العناصر.
📦 الرسم التوضيحي لنموذج الصندوق
يمثل الشكل التالي كيفية بناء العنصر داخل الصفحة:
+---------------------------+
| Margin |
| +---------------------+ |
| | Border | |
| | +--------------+ | |
| | | Padding | | |
| | | +----------+ | | |
| | | | Content | | | |
| | | +----------+ | | |
| | +--------------+ | |
| +---------------------+ |
+---------------------------+
🧪 مثال تطبيقي على Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
padding: 20px;
border: 5px solid gray;
margin: 30px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div>هذا مثال على نموذج الصندوق في CSS.</div>
</body>
</html>
📏 حساب الأبعاد
عند تحديد عرض عنصر مثلًا بـ width: 300px، فإن الحجم الكلي للعنصر يعتمد على:
- عرض المحتوى (300px)
- + الحشوة (Padding)
- + الحد (Border)
- + الهامش (Margin)
🔹 لكن يمكن جعل width و height تشمل الحشوة والحد باستخدام:
* {
box-sizing: border-box;
}
💡 ملاحظات مهمة
- خاصية
box-sizing: border-box;تجعل إدارة الأبعاد أسهل. - من المهم فهم نموذج الصندوق عند تصميم التخطيطات (Layouts).
- جميع العناصر في HTML تتبع هذا النموذج بشكل افتراضي.
تعليقات
إرسال تعليق