شرح Box Model فى CSS

سيتم شرح Box Model فى CSS، مع بعض الأمثلة التوضيحية.

شرح Box Model فى CSS

الـ box model عبارة عن حاوية تحتوي على خصائص متعددة بما في ذلك الـ borders و padding و margin والمحتوى نفسه. يمكن اعتبار جميع عناصر HTML مربعات.

يتم استخدامه لإنشاء تصميم وتخطيط صفحات الويب. يمكن استخدامه كمجموعة أدوات لتخصيص تخطيط العناصر المختلفة.

يعرض متصفح الويب كل عنصر كمربع مستطيل وفقًا لنموذج مربع CSS.

يتكون كل box من أربعة أجزاء أو مناطق) ، محددة:

1. padding: يحدد المساحة الداخلية المتروكة للعنصر. هذه المنطقة هي في الواقع المساحة حول منطقة المحتوى وداخل مربع الحدود. يتم تحديد أبعادها من خلال عرض وارتفاع الـ padding-box.
2. border: المنطقة الواقعة بين الـ padding للمربع والـ margin. يتم تحديد أبعادها من خلال عرض وارتفاع الحدود.
3. margin: تتكون هذه المنطقة من مسافة بين الـ border والـ margin. أبعاد منطقة الـ margin هي عرض وارتفاع الـ padding-box.
4. content: هى منطقة المحتوى التى تحتوى على المحتوى “الحقيقي” للعنصر ، مثل النص أو الصورة أو مشغل الفيديو. أبعاده هي عرض المحتوى (أو عرض مربع المحتوى) وارتفاع المحتوى (أو ارتفاع مربع المحتوى).

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

<style>
    .box {
        margin: 30px;
        border: 5px solid #f00;
        padding: 35px;
        width: 250px;
    }
</style>

<h2>Box Model</h2>
<div class="box">
    <p>Box model example</p>
</div>

إليك صورة توضيحية للـ box model الخاص بمتصفح firefox: