يمكن اعتبار جميع عناصر HTML كصناديق.
يتكون كل صندوق من أربعة أجزاء رئيسية:
- المحتوى: النص أو الصور التي تظهر داخل الصندوق.
- التبطين: مساحة شفافة حول المحتوى.
- الحافة: خط يحيط بالتبطين والمحتوى.
- الهامش: مساحة شفافة حول الحافة.
باستخدام نموذج الصندوق، يمكنك إضافة حواف وتحديد المسافة بين العناصر في تصميماتك.
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
عرض وارتفاع العنصر
لتعيين عرض وارتفاع عنصر بشكل صحيح في جميع المتصفحات، تحتاج إلى فهم كيفية عمل نموذج الصندوق (Box Model) في CSS.
ملاحظة مهمة: عندما تحدد خصائص العرض والارتفاع باستخدام CSS، فإنك تحدد فقط عرض وارتفاع منطقة المحتوى للعنصر. لحساب العرض والارتفاع الإجماليين للعنصر، يجب عليك أيضًا تضمين التبطين والحدود.
مثال:
سيحتوي عنصر <div> هذا على عرض إجمالي يبلغ 350 بكسل وارتفاع إجمالي يبلغ 80 بكسل:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
الحسابات:
عرض العنصر الإجمالي = 320 بيكسل (عرض منطقة المحتوى) + 20 بيكسل (تبطين اليسار واليمين) + 10 بيكسل (حافة اليسار واليمين) = 350 بيكسل
ارتفاع العنصر الإجمالي = 50 بيكسل (ارتفاع منطقة المحتوى) + 20 بيكسل (تبطين الأعلى والأسفل) + 10 بيكسل (حافة الأعلى والأسفل) = 80 بيكسل
قواعد حساب العرض والارتفاع الكليين:
- عرض العنصر الإجمالي = عرض المحتوى + تبطين اليسار + تبطين اليمين + حافة اليسار + حافة اليمين
- ارتفاع العنصر الإجمالي = ارتفاع المحتوى + تبطين الأعلى + تبطين الأسفل + حافة الأعلى + حافة الأسفل
ملحوظة:
- تؤثر خاصية
marginأيضًا على المساحة الإجمالية التي يشغلها الصندوق على الصفحة، ولكن لا يتم تضمين الهامش في الحجم الفعلي للصندوق. يتوقف عرض وارتفاع الصندوق الإجمالي عند الحافة.
