مرحبًا بكم مرة أخرى في عالم CSS الرائع!

هذه المرة نحن على وشك الكشف عن أحد المفاهيم الأساسية في تصميم الويب - نموذج CSS Box. إذا سبق لك أن تساءلت عن سبب احتواء العناصر الموجودة في صفحتك على حشوة غير مرئية أو هوامش غامضة، فأنت في المكان الصحيح.

دعونا نتعمق في عالم CSS المليء بالصناديق ونتعلم كيف يمكن لهذا النموذج أن يحولك إلى خبير في التخطيط!

تعرف على نموذج الصندوق: الملابس الداخلية لصفحة الويب الخاصة بك!

فكر في نموذج CSS Box باعتباره الملابس الداخلية السرية لصفحة الويب الخاصة بك. إنه الأساس الذي يبقي كل شيء مرتبًا ومنظمًا بدقة. يتم تغليف كل عنصر في صفحتك بمربع، ويتكون هذا المربع من أربع طبقات متميزة:

• المحتوى: هذه هي الطبقة الداخلية التي يوجد بها النص أو الصور أو أي محتوى آخر. إنها مثل الطبقة الداخلية المريحة لصندوقك.
• الحشوة: الوسادة المحيطة بالمحتوى الخاص بك. تخيل أنها طبقة واقية ناعمة تمنع المحتوى الخاص بك من لمس حواف الصندوق.
• الحدود: الإطار الخارجي للصندوق. إنه الجزء الذي يمكنك رؤيته وتصميمه بالألوان والسمك.
• الهامش: المساحة خارج الحدود، مثل الهواء المحيط بالصندوق الخاص بك. إنه يخلق مساحة بين العنصر الخاص بك والعناصر الأخرى المحيطة به.

1. المحتوى: نجم العرض

المحتوى هو المكان الذي يحدث فيه كل السحر. إنه المكان الذي تضع فيه النصوص والصور والعناصر الأخرى. يمكنك التحكم في حجم منطقة المحتوى باستخدام خصائص مثل العرض والارتفاع.

.box {
    width: 200px;
    height: 100px;
}

يحدد هذا حجم منطقة المحتوى الخاصة بك. نظرًا لأن منطقة المحتوى هي المكان الذي تذهب إليه أغراضك، تأكد من أنها فسيحة بما يكفي لاستيعاب كل ما تريد وضعه فيه!

2. الحشو: البطانية المريحة

الحشوة تشبه البطانية المريحة التي تضعها على المحتوى الخاص بك. إنها المسافة بين المحتوى والحدود، مما يضمن عدم اقتراب المحتوى الخاص بك من الحواف.

.box {
    padding: 20px;
}

يضيف هذا وسادة مقاس 20 بكسل حول المحتوى الخاص بك. إنه مثل إعطاء المحتوى الخاص بك مساحة صغيرة للتنفس.

3. الحدود: الإطار الأنيق

الحدود هي الإطار الأنيق الذي يحيط بالمحتوى والحشو الخاص بك. يمكنك تخصيص لونه وعرضه وأسلوبه. إنه مثل اختيار إطار الصورة المثالي لعملك الفني.

.box {
    border: 2px solid #007BFF;
}

هنا، لديك حدود زرقاء صلبة بحجم 2 بكسل حول الصندوق الخاص بك. لا تتردد في الإبداع باستخدام الحدود المتقطعة أو المنقطة أو حتى المزدوجة!

4. الهامش: الفضاء بعيد المنال

الهوامش هي المساحة الموجودة خارج الحدود. إنهم مثل مجال القوة غير المرئي الذي يفصل بين العناصر. استخدم الهوامش للتحكم في المسافة بين المربع الخاص بك والعناصر الأخرى في الصفحة.

.box {
    margin: 30px;
}

يضيف هذا مساحة تبلغ 30 بكسل حول صندوقك، مما يضمن عدم اصطدامه بجيرانه. إنه مثل إعطاء صندوقك بعض المساحة الشخصية!

5. تحجيم الصندوق: ضبط سلوك الصندوق

افتراضيًا، يضيف نموذج الصندوق حشوة وحدودًا لعرض العنصر وارتفاعه، مما يجعل الحجم الفعلي أكبر مما تحدده. إذا كنت تريد تغيير هذا السلوك، استخدم خاصية تغيير حجم الصندوق.

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

مع مربع الحدود، يتضمن العرض والارتفاع الذي قمت بتعيينه الحشو والحدود. إنه مثل تغيير شكل صندوقك بحيث يناسب تمامًا ما تريده.

نصيحة احترافية؟
القيمة الافتراضية لتغيير حجم المربع هي content-box، والتي تستبعد الحشو والحدود من حسابات العرض والارتفاع. التبديل إلى تغيير حجم المربع: يمكن لمربع الحدود تبسيط إدارة التخطيط من خلال تضمين الحشو والحدود في الحجم الإجمالي للعنصر.

التفاف عليه

قد يبدو نموذج CSS Box كثيرًا لاستيعابه؛ ولكن بمجرد أن تتقنه، ستجد أنه المفتاح لإتقان التخطيطات والتباعد على صفحة الويب الخاصة بك. تذكر أن كل عنصر في صفحتك عبارة عن مربع يحتوي على محتوى وحشوة وحدود وهامش. احصل على الراحة مع هذه المفاهيم، وسوف تصبح مثل المحترفين في أي وقت من الأوقات.

تعليمات سعيدة!