الكورس

Advertisements

شرح 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

Box model example

عندما تقوم بتعيين خصائص width وheight لعنصر باستخدام CSS ، فإنك تقوم فقط بتعيين العرض والارتفاع لمنطقة المحتوى. لحساب الحجم الكامل لعنصر ما ، يجب عليك أيضًا إضافة padding وborder وmargin.


 

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

 



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements