انتقل إلى محتوى الدرس

CSS Box Model نموذج العرض الصندوقي في لغة CSS

سوف تتعلم في هذا الدرس كيف تُعرض العناصر علي المُتصفح وكل عنصر يُعرض داخل صندوق وكل صندوق يتكون من مجموعة مساحات يجب التعرف عليها قبل التعامل مع هذا الصندوق بلغة CSS.
1 صفوف تعليمية
لغة CSS
4,770 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
Box Model نموذج العرض الصندوقي في لغة CSS وهي عرض كل عنصر HTML علي المتصفح علي شكل صندوق هذا الصندوق له مكونات فوق بعضها لبعض وتبدأ من content محتوي العنصر وتنتهي عند margin هذا الصندوق إما يظهر بكامل تفاصيلة أو بعضها علي حسب تحديد مساحة كل مكون علي المتصفح.
نموذج العرض الصندوقي في لغة CSS
مكونات صندوق box model علي المتصفح:

  • content بداية box model هو محتوي عنصر HTML سواء هذا المحتوي نصي أو صوره أو فيديو الخ.
  • padding أعلي المحتوي هو الهامش الداخلي وهي المساحة التي تكون بين content المحتوي وبين border الإطار الداخلي.
  • border إطار الزي يأتي بعد padding الهامش الداخلي.
  • outline offset المسافة بين border الإطار الداخلي outline والإطار الخارجي.
  • outline وهو الإطار الخارجي للعنصر وهو بعد border الإطار الداخلي.
  • margin وهي الهامش الخارجي للعنصر وهي الزي يلامس هوامش عناصر HTML الأخري المحيطة حولة.
  • height وهو طول العنصر الزي يتم ضبطة بواسطة CSS أو HTML.
  • width وهو عرض العنصر الزي يتم ضبطة بواسطة CSS أو HTML.