نموذج الصندوق
نفهم كيف يرى المتصفح كل عنصر صندوقًا، وكيف نتحكم في مسافاته. ⏱ نحو 25 دقيقة.
- تصف طبقات الصندوق: المحتوى والحشوة والحد والهامش.
- تكتب القيم المختصرة للاتجاهات.
- تستخدم
box-sizing: border-boxلحساب العرض بسهولة. - توسّط صندوقًا، وتفرّق بين
blockوinlineوinline-block.
١كل عنصر صندوق
المتصفح يرى كل عنصر في الصفحة صندوقًا مستطيلًا، حتى لو بدا دائريًّا. ولكل صندوق أربع طبقات من الداخل إلى الخارج:
| الطبقة | الخاصية | تشبيهها: صورة في برواز على الجدار |
|---|---|---|
| المحتوى | width و height | الصورة نفسها. |
| الحشوة | padding | الورق الأبيض حول الصورة داخل البرواز. |
| الحد | border | خشب البرواز. |
| الهامش | margin | المسافة بين البرواز والبراويز الأخرى. |
<div class="box">محتوى الصندوق</div><div class="box">صندوق ثانٍ</div>
.box { width: 200px; padding: 20px; border: 4px solid #1D5FB4; margin: 16px; background: #DCE8FA;}
لاحظ: الخلفية تملأ المحتوى والحشوة، ولا تمتد إلى الهامش. والهامش مسافة شفافة خارج الحد.
٢قيم الاتجاهات
للحشوة والهامش أربعة اتجاهات، ونكتبها بطرق مختصرة:
| الكتابة | معناها |
|---|---|
padding: 20px; | 20 من الجهات الأربع. |
padding: 10px 20px; | 10 أعلى وأسفل، و 20 يمين ويسار. |
padding: 5px 10px 15px 20px; | أعلى، ثم يمين، ثم أسفل، ثم يسار (مثل عقارب الساعة). |
margin-top: 30px; | جهة واحدة فقط: top أو right أو bottom أو left. |
والحد يُكتب في سطر واحد: السُّمك ثم النوع ثم اللون: border: 2px solid gray;. وأنواعه: solid متصل، و dashed متقطع، و dotted منقّط.
٣مشكلة العرض، وحلّها box-sizing
في المثال الأول كتبنا العرض 200px، لكن الصندوق ظهر أعرض! لأن المتصفح يضيف الحشوة والحد إلى العرض: 200 + 20 + 20 + 4 + 4 = 248. الحل سطر واحد يجعل العرض يشمل الحشوة والحد:
<div class="a">بلا border-box</div><div class="b">مع border-box</div>
div { width: 200px; padding: 20px; border: 4px solid #1D5FB4; margin-bottom: 8px;}.b { box-sizing: border-box;}
لذلك يبدأ أغلب المطوّرين ملف CSS بهذه القاعدة لكل العناصر: * { box-sizing: border-box; }. والنجمة * محدِّد يختار كل العناصر.
٤التوسيط والكتلة والسطر
<div class="card">بطاقة في الوسط</div><p>رابط <a href="#">سطري</a> و <span class="tag">وسم</span> داخل الفقرة.</p>
.card { width: 220px; margin: 20px auto; padding: 16px; border: 2px solid #E07A1F; border-radius: 10px; text-align: center;}.tag { display: inline-block; padding: 2px 10px; background: #FCE8D5; border-radius: 20px;}
| المعنى | |
|---|---|
margin: 20px auto; | 20 أعلى وأسفل، و auto يمينًا ويسارًا: يقسّم المسافة بالتساوي فيتوسط الصندوق. يحتاج عرضًا محددًا. |
display: block | يبدأ في سطر جديد ويأخذ العرض كله (div و p و h1). |
display: inline | داخل السطر، ولا يقبل width ولا padding رأسية كاملة (a و span). |
display: inline-block | داخل السطر لكنه يقبل العرض والحشوة. مناسب للأزرار والوسوم الصغيرة. |
٥أداة المطوّر: شاهد الصناديق
- في صفحتك (Chrome أو Edge) اضغط بالزر الأيمن على أي عنصر، ثم فحص Inspect (أو F12).
- في لوحة Styles ترى قواعد CSS المطبقة على العنصر، ويمكنك تعديلها مؤقتًا.
- في لوحة Computed يظهر رسم نموذج الصندوق بأرقام: المحتوى والحشوة والحد والهامش.
- هذه الأداة أهم صديق لمطوّر الواجهات عند البحث عن سبب مسافة غريبة.
توقّع وتحقّق
المسافة بين النص وحد الصندوق:
المسافة بين صندوقين متجاورين:
صندوق width: 100px و padding: 10px و border: 0، كم عرضه الكلي دون border-box؟
100 + 10 + 10.توسيط صندوق عرضه 300px:
الخلاصة
- من الداخل: المحتوى ثم
paddingثمborderثمmargin. padding: 10px 20pxتعني أعلى وأسفل ثم يمين ويسار.- * {
box-sizing: border-box; } يجعل العرض يشمل الحشوة والحد. margin: 0 autoمعwidthيوسّط الصندوق.blockسطر كامل، وinlineداخل السطر، وinline-blockداخل السطر بعرض وحشوة.
تحدٍّ برمجي: بطاقة في وسط الصفحة
متوسطنسّق بطاقة تسجيل في وسط الصفحة بنموذج الصندوق.
- كل العناصر
box-sizing: border-box. - البطاقة .card عرضها 320px وفي وسط الصفحة أفقيًّا.
- حشوة البطاقة 24px من كل الجهات.
- حد البطاقة 2px متصل solid بلون #1D5FB4.
- الزر .btn من نوع
inline-blockوحشوته 10px أعلى وأسفل و 24px يمينًا ويسارًا.
👀 اعرض شكل الناتج المطلوب
box-sizing: border-boxللعناصر.- عرض البطاقة 320px.
- البطاقة في الوسط أفقيًّا.
- حشوة البطاقة 24px من كل الجهات.
- حد البطاقة 2px solid #1D5FB4.
- الزر
inline-blockبحشوة 10px و 24px.
💡 تلميح 1
box-sizing: border-box; }💡 تلميح 2
margin: 30px auto; مع width.حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
<div class="card"> <h2>انضم إلينا</h2> <p>سجّل الآن في دورة تطوير الويب.</p> <a class="btn" href="#">سجّل</a></div>
* { box-sizing: border-box;}.card { width: 320px; margin: 30px auto; padding: 24px; border: 2px solid #1D5FB4; border-radius: 12px;}.btn { display: inline-block; padding: 10px 24px; background: #1D5FB4; color: white; text-decoration: none;}