English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يصف نموذج الصندوق CSS كيفية ترتيب العناصر بوضوح على صفحة الويب.
كل عنصر يمكن عرضه يحتوي على مربع واحد أو أكثر. يصف نموذج الصندوق CSS كيفية ترتيب هذه المربعات على صفحة الويب. يمكن لهذه المربعات أن تحتوي على خصائص مختلفة وأن تتفاعل بطرق مختلفة، ولكن كل مربع يحتوي على منطقة محتوى وملحقات اختيارية مثل الهوامش والحدود.
توضح الشكل التالي كيفية تحديد خصائص margin، padding وborder لتحديد المساحة التي يمكن أن تشغلها العنصر على صفحة الويب.
عادةً، عندما تستخدم CSS العرضوالالارتفاععند تعيين عرض أو الارتفاع للعنصر، في الواقع، أنت تقوم بتعيين عرض أو الارتفاع للمحتوى الخاص بالعنصر. يعتمد عرض وارتفاع الصندوق الفعلي على عدة عوامل.
يتم حساب المساحة الفعلية التي يمكن أن تشغلها صندوق العنصر كما يلي:
| حجم الصندوق | خصائص CSS |
|---|---|
| العرض الإجمالي | العرض + padding-left + padding-right + border-left + border-right + margin-left + margin-right |
| الارتفاع الإجمالي | الارتفاع + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom |
استخدام مختلف الخصائص المذكورة في الفصول القادمة.
ملاحظة:في نموذج الصندوق CSS، منطقة محتوى الصندوق هي منطقة عرض النصوص، الصور، القوائم، الجداول، النماذج، الفيديوهات وما إلى ذلك.