في CSS ، Box Model يعد المفهوم مفهومًا مهمًا لتحديد كيفية تنظيم العنصر ووضعه على صفحة ويب. يتكون من مكونات أساسية مثل المحتوى Padding و Border و Margin.
Content
Content هي المنطقة التي تحتوي على المحتوى الفعلي للعنصر ، مثل النص أو الصور أو مقاطع الفيديو.
لتحديد حجم المحتوى ، نستخدم خصائص width و height.
Padding
Padding هي المساحة حول المحتوى ، مما يخلق فجوة بين المحتوى والعنصر border.
لتحديد padding القيم ، نستخدم padding-top, padding-right,padding-bottom وخصائص . padding-left
Border
يمثل Border المخطط التفصيلي حول العنصر ، مما يؤدي إلى إنشاء حدود واضحة بين المحتوى والمنطقة المحيطة.
لتنسيق border ، نستخدم border-width ، border-style و ، border-color وخصائص.
Margin
Margin هي المساحة خارج العنصر border ، مما يخلق فجوة بين العناصر الأخرى.
لتحديد margin القيم ، نستخدم margin-top ، و margin-right ، والخصائص. margin-bottom margin-left
من خلال استخدام Box Model CSS ، يمكننا تخصيص حجم وموضع عنصر عن طريق تعديل قيم مكوناته.
مثال:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
في المثال أعلاه ، يبلغ عرض العنصر الذي يحتوي .box على الفئة 200 بكسل وارتفاعه 100 بكسل. يبلغ حجمها 20 بكسل padding ، والأسود border بسمك 1 بكسل ، و 10 بكسل margin.
من خلال ضبط هذه القيم ، يمكنك إنشاء عناصر ذات أحجام ومسافات مختلفة على صفحة الويب الخاصة بك. من خلال استخدام Box Model ، يمكنك التحكم في تحديد مواقع العناصر وحجمها وتباعدها داخل واجهتك.