CSS

Part 6 ترتيب العناصر في CSS – Box Model – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 144 3 دقائق

ترتيب العناصر في CSS – Box Model

في CSS، الـ Box Model هو مفهوم أساسي يساعد في تحديد كيفية عرض وتنسيق العناصر داخل صفحة الويب. كل عنصر في صفحة HTML يتم تمثيله على أنه “مربع” يتكون من عدة أجزاء: المحتوى (Content)، التعبئة (Padding)، الحدود (Border)، و الهامش (Margin). فهم كيفية عمل الـ Box Model مهم جدًا لضبط الأبعاد والمسافات بين العناصر.

مكونات الـ Box Model

الـ Box Model يتكون من 4 أجزاء رئيسية:

المحتوى (Content):
- هذا هو الجزء الذي يحتوي على النصوص أو الصور داخل العنصر.
- المساحة المخصصة للمحتوى هي التي تحددها خصائص مثل width و height.
التعبئة (Padding):
- هو المسافة بين المحتوى وحدود العنصر (border).
- يمكن أن يكون له تأثير على المساحة حول النصوص أو الصور داخل العنصر.
- يتم تحديده باستخدام padding.
الحدود (Border):
- الحدود هي الخطوط التي تحيط بالعنصر. يمكن تحديد سماكة ونوع ولون الحدود باستخدام border.
الهامش (Margin):
- هو المسافة بين العنصر والعناصر المجاورة له.
- يتم تحديده باستخدام margin.

كل جزء من هذه الأجزاء يمكن تخصيصه باستخدام CSS، ويمكن تحديد الأبعاد بشكل منفصل لكل جزء.

كيفية التعامل مع خصائص الـ Box Model

1. محتوى (Content)

يمكن تحديد أبعاد العنصر باستخدام الخصائص width و height لتحديد محتوى العنصر.

مثال

div {
    width: 300px;
    height: 150px;
}

هنا تم تحديد عرض العنصر إلى 300 بكسل وارتفاعه إلى 150 بكسل.

2. تعبئة (Padding)

يتم تحديد المسافة بين المحتوى وحدود العنصر باستخدام padding. يمكن تحديد التعبئة لكل جهة (أعلى، أسفل، يمين، يسار) أو جميع الجهات بنفس القيمة.

مثال

div {
    padding: 20px;  /* تعبئة 20px من جميع الجوانب */
}

سيتم إضافة 20 بكسل من المسافة بين المحتوى وحدود العنصر من جميع الجهات.

3. الحدود (Border)

الحدود هي الخطوط التي تحيط بالعنصر، ويمكنك تحديد سمك الخط ونوعه ولونه باستخدام border.

مثال

div {
    border: 5px solid black;
}

في هذا المثال، تم إضافة حد سمكه 5 بكسل، لونه أسود، ونوعه solid (مستمر).

4. هامش (Margin)

margin هو المسافة بين العنصر والعناصر المجاورة له. يشبه padding ولكنه يؤثر على المسافة بين العنصر والعناصر المحيطة به بدلاً من المسافة داخل العنصر.

مثال

div {
    margin: 30px;  /* هامش 30px من جميع الجوانب */
}

سيتم إضافة 30 بكسل من المسافة بين العنصر والعناصر المحيطة به.

نموذج الـ Box Model الكامل

لننظر الآن في مثال يوضح كيف يعمل الـ Box Model وكيفية تخصيص الأجزاء المختلفة.

كود مثال كامل:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على Box Model</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="box">محتوى داخل الصندوق</div>

</body>
</html>

CSS (styles.css):

/* تحديد الشكل العام للصندوق */
.box {
    width: 300px;                /* عرض العنصر */
    height: 150px;               /* ارتفاع العنصر */
    padding: 20px;               /* تعبئة 20px من جميع الجهات */
    border: 5px solid black;     /* حد بسمك 5px ولون أسود */
    margin: 30px;                /* هامش 30px من جميع الجهات */
    background-color: lightblue; /* خلفية العنصر */
    color: white;                /* لون النص */
    font-size: 18px;             /* حجم النص */
    text-align: center;          /* محاذاة النص في المنتصف */
}

الشرح التفصيلي:

العنصر .box:
- تم تحديد عرض العنصر بـ 300px وارتفاعه بـ 150px.
- التعبئة تم تحديدها إلى 20px من جميع الجهات، مما يعني أن هناك مسافة قدرها 20px بين المحتوى وحدود العنصر.
- تم إضافة حدود بسمك 5px ولون أسود حول العنصر.
- الهامش تم تحديده إلى 30px، مما يعني أن العنصر سيكون بعيدًا عن العناصر المجاورة له بمقدار 30px من جميع الجهات.
- تم تعيين الخلفية إلى لون أزرق فاتح lightblue.
- تم تعيين اللون النص إلى الأبيض لتكون أكثر وضوحًا ضد الخلفية الزرقاء.
- حجم النص تم تعيينه إلى 18px مع محاذاة النص إلى المركز.

كيف يعمل الـ Box Model هنا:

المحتوى (Content): هو المساحة المخصصة للنص “محتوى داخل الصندوق”. يتم تحديده بواسطة width و height.
التعبئة (Padding): تم إضافة 20px من جميع الجوانب بين المحتوى والحدود.
الحدود (Border): تمت إضافة حدود بسمك 5px ولون أسود حول العنصر.
الهامش (Margin): تم إضافة 30px من المسافة بين العنصر والعناصر المجاورة له.

التجربة:

جرب تغيير القيم (مثل تغيير width, height, padding, border, margin) في المتصفح لترى كيف تتغير الأبعاد والمسافات بين العناصر.
يمكنك أيضًا تعديل الحدود (مثل تغيير اللون أو السمك) أو تغيير التعبئة و الهامش لملاحظة تأثير هذه التغييرات على العنصر.

نصائح هامة عند التعامل مع الـ Box Model:

احتساب الأبعاد:
- عندما تقوم بتحديد width و height لعناصر، فإن هذه القيم لا تشمل padding و border و margin. لحساب الأبعاد الفعلية للعنصر، تحتاج إلى إضافة هذه القيم.
طريقة حساب الأبعاد – box-sizing:
- الافتراضي في المتصفحات هو أن width و height يتم تحديدهما فقط للمحتوى (Content)، وتُضاف padding و border بشكل منفصل.
- إذا كنت ترغب في أن تكون width و height تشمل padding و border، يمكنك استخدام خاصية box-sizing: border-box;:
مثال

.box {
    box-sizing: border-box;
}

- هذا يجعل العنصر يحسب الـ padding و border ضمن الأبعاد المحددة للعنصر.

الخلاصة:

فهم Box Model يمكن أن يسهل عليك تنسيق العناصر في الصفحة بشكل دقيق.
من خلال التحكم في المحتوى، التعبئة، الحدود و الهامش، يمكنك تحديد المسافات والتنسيقات بدقة بين العناصر