نموذج Box Model في CSS
كيف يرى المتصفح (Browser ) عناصر صفحة الويب ....!! وماهو نموذج Box Model في CSS..؟!! وما طريقة ضبط الحدود (Border) لعناصر الـ HTML مع CSS...!! وماهي Padding في CSS وكيف يتم ضبطها...!! و ماهي طريقة ضبط الهوامش Margins لعناصر الـ HTML مع CSS..!!!
يُعد نموذج (Box Model) أحد الأساسيات التي يجب فهمها عند العمل مع CSS في تصميم صفحات الويب. يقدم نموذج Box Model نظرة شاملة على كيفية تحديد وتنسيق العناصر في صفحة الويب، ويساعد في تحديد المساحات والهوامش والحواف والحدود لكل عنصر.في هذا المقال، سنتعرف على نموذج (Box Model) في CSS ومكوناته الأساسية وطريقة عمله.لنبدأ…
في هذا المقال نتعرف على :
- نموذج الـ Box Model.
- الـ Box Model و منطقة المحتوى Content Area.
- الـ Box Model و مساحة الحشو Padding.
- الـ Box Model والحدود Borders.
- الـ Box Model والهوامش Margins.
- الوحدات في CSS والـ Box Model.
نموذج الـ Box Model
تتعامل CSS مع كل عنصر من عناصر HTML على حدة كما لو كان يمثله مربع Box . و يُستخدم مصطلح "Box Model" للتعبير عنه. عند الحديث عن التصميم والتخطيط Box Model هو في الأساس مربع يحيط بعنصر الـ HTML .
يتكون نموذج (Box Model) في CSS. من التباعد الخارجي (الهوامش Margin) و التباعد الداخلي (مساحة الحشو Padding) والحدود (Border) والعرض (Width) والارتفاع (Height) للعناصر.
إن فهم نموذج الـ Box model يجعل من السهل تقدير الحجم الفعلي لعنصر الـ HTML، ففي CSS يتم حساب الحجم الإجمالي للعنصر عن طريق جمع الهامش والحشو والحدود والعرض والارتفاع معًا. وهو ما يشكل نموذج الـ Box model. يظهر الشكل التالي ترتيب مكونات نموذج الـ Box model في CSS :
لنبدأ بالتعرف على المكونات الرئيسية لنموذج الـ Box Model:
- منطقة المحتوى Content Area:
هي مساحة محتوى الفعلي للعنصر وتحدد بواسطة الخصائص العرض (Width) والارتفاع (Height) التي تُستخدم لتحديد أبعاد العنصر. يمكن تعيين قيمة العرض والارتفاع بوحدات القياس المختلفة مثل البكسل أو النسبة المئوية. - مساحة الحشو (Padding):
هي مساحة تحيط بمنطقة المحتوى من الخارج وهي منطقة شفافة اختيارية. يستخدم الحشو لتحديد المساحة الداخلية للعنصر، وهو المسافة بين حدود العنصر ومحتواه الفعلي. يمكن تعيين قيمة الحشو للجوانب الأربعة بنفس الوحدات المتاحة للهامش. - الحدود (Border):
تُستخدم الحدود لإضافة خطوط حول العنصر(اختيارية ). يمكن تحديد لون الحدود ونمطها وعرضها. يمكن تعيين قيمة العرض للجوانب الأربعة أو لجانب واحد فقط. - الهامش (Margin):
يُستخدم الهامش لتحديد المسافة بين العنصر والعناصر الأخرى في الصفحة. يمكن تعيين قيمة الهامش للجوانب الأربعة (العلوية والسفلية واليمنى واليسرى) بوحدات القياس المختلفة مثل البكسل (px) أو النسبة المئوية (%).
نموذج Box Model هو جزء أساسي من التصميم بواسطة CSS، وفهمه يساعدك في تحديد وتنسيق العناصر بشكل دقيق ومنظم. باستخدام المكونات المختلفة لنموذج الـ box model يمكننا تحقيق تصاميم مرنة وجميلة على صفحات الويب. قد يكون فهم نموذج Box Model صعبًا في البداية، لكن مع التدريب والتجربة، ستلاحظ أنه ستتعود على استخدامه بكل سهولة وثقة.
الـ Box Model و منطقة المحتوى Content Area
تتكون منطقة المحتوى من محتوى عناصر الـ HTML المكونه لصفحة الويب، أي كان هذا المحتوى نص أو صورة أو ملف أو أن يكون عنصر الـ HTML عنصر تجمعي يشمل مجموعة عناصر مثل العنصر <div> .ولكل عنصر من عناصر الـ HTML الموجود في صفحة الويب حجم ومساحة معينة وإجمالي مساحة العنصر تحدد بواسطة نموذج الـ Box Model.
وتحدد منطقة المحتوى بضبط الأبعاد لعصنر الـ HTMl في الـ CSS بواسطة الخصائص العرض (Width) والارتفاع (Height) وتستخدم كما يوضح المثال التالي:
...........
div {
width: 300px;
height: 200px;
}
img {
width: 100%;
height: auto;
}
...........في المثال أعلاه، تم تعريف الأبعاد لعنصر div وعنصر الصورة img. تم تحديد العرض والارتفاع بقيم محددة. يمكنك تعديل هذه القيم وفقًا لاحتياجات التصميم الخاصة بك.
الـ Box Model و مساحة الحشو Padding
في نموذج الـ Box Model تشير مساحة الحشو (Padding) إلى المسافة بين حاوية العنصر ومحتواه الداخلي. وهي المساحة التي تحيط مباشرة بمحتوى عنصر الـ HTML بحيث تكون بينه وبين الحدود Borders .
مساحة الحشو Padding تؤدي إلى إنشاء مساحة إضافية داخل العنصر وهي مساحة شفافة وليس لها لون أو زخرفة خاصة بها. يمكن تعيين قيمة مساحة الحشو باستخدام خاصية "padding" في CSS، ويمكن تحديد قيمة الحشو للجوانب الأربعة (الأعلى top، اليمين right، الأسفل bottom، اليسار left) بشكل مستقل، بواسطة Properties توفرها الـ CSS و هي:
- padding-top لتعيين مساحة الحشو Padding أعلى المحتوى.
- padding-bottom لتعيين مساحة الحشو Padding أسفل المحتوى.
- padding-right لتعيين مساحة الحشو Padding يمين المحتوى.
- padding-left لتعيين مساحة الحشو Padding يسار المحتوى.
ولتعيين قيم مساحة الحشو padding في CSS تتوفر عدة طرق وهي :
1. قيمة مستقلة لكل جانب:
ومع هذه الطريقة يتم تعيين قيمة مستقلة لكل جانب من جوانب مساحة الحشو Padding كما يتضح في المثال التالي:
...........
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 5px;
...........
في هذا المثال، ستكون مساحة الحشو 10 بكسل للجانب العلوي، 20 بكسل للجانب الأيمن، 15 بكسل للجانب السفلي، و 5 بكسل للجانب الأيسر.
2. قيمة واحدة:
مع هذه الطريقة يتم تعيين قيمة واحدة لجميع الجوانب في مساحة الحشو padding وكما يتضح في المثال التالي:
...........
padding: 10px;
...........
في هذا المثال، ستكون مساحة الحشو 10 بكسل للجوانب الأربعة (top، right, left ,bottom ) من العنصر.
3. قيم متعددة:
يمكن ان تكون القيم المتعددة قميتين أو ثلاث او اربع ويختلف الاستخدام لكل حالة من القيم المتعددة فتكون:
في حال كانت القيم المتعددة مكونة من قيمتين هذا يعني أن القيمة الاولى تمثل مقدار المسافة البادئة padding أعلى واسفل المحتوى (top and bottom) بينما تمثل القيمة الثانية مساحة الـ padding يمين ويسار المحتوى (right and left ).
أما في حال أن تكون القيم المتعددة بـ 3 قيم فالقيمة الأولى تمثل مساحة الـ padding من الأعلى (padding-top) وتمثل القيمة الثانية مساحة الـ padding للجهتين اليمنى واليسرى (right and left)، بينما تمثل القيمة الثالثة مساحة الـ padding أسفل المحتوى (bottom).
وتسخدم القيم المتعددة 4 قيم عندما نريد تخصيص مساحة padding لكل جهة على حدة بشكل مختصر حيث تمثل كل قيمة جانب من الجوانب الأربع فتمثل القيمة الأولى من اليسار قيمة Padding-top والقيمة الثانية تمثل قيمة Padding-right والقيمة الثالثة Padding-bottom والقيمة الرابعة Padding-left إذاً ستكون كالتالي :
padding: top right bottom left
وهنا مثال يوضح استخدام الطريقة المختصرة لتعيين قيم مساحة الحشو padding حيث تعتبر هذه الطريقة الأكثر استخداماً :
...........
padding: 10px 20px 15px 5px;
...........
في هذا المثال، ستكون مساحة الحشو 10 بكسل للجانب العلوي، 20 بكسل للجانب الأيمن، 15 بكسل للجانب السفلي، و 5 بكسل للجانب الأيسر.قيم مساحة الحشو يمكن تعيينها باستخدام أي وحدة قياس تمتلكها CSS، مثل بكسل (px) أو النسبة المئوية (%) أو الوحدة النسبية (em) وغيرها.
مثال تطبيقي على Padding
ذكرنا أن padding تؤدي إلى إنشاء مساحة إضافية داخل العنصر و يمكن ضبط القيم لمساحة padding وذكرنا ايضاً أنه يمكننا ضبط القيم للـ Padding مباشرة من خلال إسنادها إلى الخالصية padding لاحظ /ي معي طريقة التنفيذ في المثال التالي :
.div1 { border-style: solid;
border-color: rgb(11, 100, 100);
padding: 15px;}
.div2 { border-style: double;
padding:20px 30px;
border-left-width: 10px;
border-right-width: 10px; }
.div3 { border-style: groove ;
padding: 15px 10px 20px;
border-color: rgb(68, 145, 72);}
.div4 { border-style: inset;
padding: 5px 10px 20px 15px;
border-color: rgb(156, 192, 247); }
.div5 { border-style: outset;
padding-left: 30px;
padding-right: 30px;
border-color: rgb(156, 192, 247);}
.div6 { border-style: dashed;
padding-top: 20px;
padding-bottom: 20px;
border-width: 3px; }}
لتكن النتيجة
الـ Box Model والحدود Borders
المكون الثالث من مكونات ال Box Model الحدود Borders و تُحيط بمساحة الحشو padding وتوفر فاصلًا مرئيًا بين المحتوى الخاص بالعنصر الـ HTML ومحتوى عناصر الـ HTML الأخرى في نفس الصفحة ،,ويتم ضبط الحدود بواسطة الخاصية border property ويمكن أن تكون للحدود عرض وألوان وأنماط مختلفة.حيث يتم التحكم في الحدود بواسطة خصائص الحدود باستخدام خاصية "border" في CSS، وتشمل الخصائص الرئيسية التالية:
- سمك الحدود (Border Width):
يمكن تحديد سمك (عرض) الحدود باستخدام قيمة رقمية، مثل بكسل (px) أو النسبة المئوية (%) أو الوحدة النسبية (em) وغيرها. يمكن تحديد سمك الحدود بشكل منفصل لكل جانب باستخدام الخصائص التالية:
- border-width: يحدد سمك الحدود لجميع الجوانب.
- border-top-width: يحدد سمك الحدود للجانب العلوي.
- border-right-width: يحدد سمك الحدود للجانب الأيمن.
- border-bottom-width: يحدد سمك الحدود للجانب السفلي.
- border-left-width: يحدد سمك الحدود للجانب الأيسر.
- نمط الحدود (Border Style):
يمكن تحديد نمط الحدود باستخدام القيم التالية: - solid: حدود صلبة.
- dashed: حدود متقطعة.
- dotted: حدود مُنقطة.
- double: حدود مزدوجة.
- groove: حدود بنمط محفور.
- ridge: حدود بنمط مرتفع.
- inset: حدود بنمط مُدفوع داخل العنصر.
- outset: حدود بنمط مُدفوع خارج العنصر.
- border-style: يحدد نمط الحدود لجميع الجوانب.
- border-top-style: يحدد نمط الحدود للجانب العلوي.
- border-right-style: يحدد نمط الحدود للجانب الأيمن.
- border-bottom-style: يحدد نمط الحدود للجانب السفلي.
- border-left-style: يحدد نمط الحدود للجانب الأيسر.
- لون الحدود (Border Color):
يمكن تحديد لون الحدود باستخدام قيمة لون معترف بها في CSS، مثل القيم الثابتة (مثل "red" أو "blue") أو القيم الرقمية (مثل "#FF0000" أو "rgb(255, 0, 0)") وغيرها. يمكن تحديد لون الحدود بشكل منفصل لكل جانب باستخدام الخصائص التالية:
- border-color: يحدد لون الحدود لجميع الجوانب.
- border-top-color: يحدد لون الحدود للجانب العلوي
- border-right-color: يحدد لون الحدود للجانب الأيمن.
- border-bottom-color: يحدد لون الحدود للجانب السفلي.
- border-left-color: يحدد لون الحدود للجانب الأيسر.
يمكن تحديد نمط الحدود بشكل منفصل لكل جانب باستخدام الخصائص التالية:
بالإضافة إلى الخصائص المذكورة أعلاه، يمكن دمج خصائص الحدود في خاصية واحدة باستخدام الصيغة التالية:
border: [width] [style] [color];
على سبيل المثال
...........
border: 2px solid red;
...........
في هذا المثال، سيتم تعيين حدود بسمك 2 بكسل، نمط صلب، ولون أحمر للعنصر.
يمكن تطبيق خاصية الحدود على أي عنصر HTML، مثل عناصر النص، الصور، الروابط، الجداول، وغيرها. يعتبر تخصيص الحدود في CSS أحد الأساليب الشائعة لتحسين تصميم المواقع وتحقيق تأثيرات بصرية مختلفة.
مثال تطبيقي على Border
كما ذكرنا الحد border وكما يحدد مع الخصائص الشكل style واللون color والعرض width يمكن التنسيق لأي من حد من حدود على حده سواء الحد الأعلى top او الاسفل button او الايمن right أو الأيسر left مع الخاصية border تماماً كطريقة العمل مع padding ايضاً يمكن تعيين مقدار الانحناء للزاوية بواسطة radius لاحظ / ي المثال التالي:
.solid { border-style: solid;
border-color: rgb(11, 100, 100);
border-top-left-radius: 20px;
border-bottom-right-radius: 20px; }
.double { border-style: double;
border-left-width: 10px;
border-right-width: 10px; }
.groove { border-style: groove ;
border-color: rgb(68, 145, 72);}
.inset { border-style: inset;
border-color: rgb(156, 192, 247); }
.outset { border-style: outset;
border-color: rgb(156, 192, 247);}
.dashed { border-style: dashed;
border-width: 3px; }
.dotted{border-top-style: dotted;
border-bottom-style: dotted;
border-width: medium;}
.ridge{border-style: ridge;
border-color: rgb(58, 117, 66);}
لتكن النتيجة
الـ Box Model والهوامش Margins
تأتي الهوامش Margins في الطبقة الاخيرة من طبقات نموذج الـ Box Model وهي طريقة لإضافة مسافة بين عنصر معين من عناصر الـ HTML والعناصر الأخرى في نفس الصفحة فالهوامش تنشئ مساحة إضافية حول العنصر، وتكون الهوامش شفافة وليس لها ألوان أو زخرفة خاصة بها. أي في CSS، الهوامش (Margins) تحدد المساحة الفارغة بين العنصر وبقية العناصر في صفحة الويب.
يتم تعيين قيمة الهوامش باستخدام الخاصية margin property في CSS وبما أن الهوامش تحيط بالعنصر من اربع جهات، فيمكن تعيين قيمة الهامش margin بعدة طرق و باستخدام عدد من الخصائص والتي تكون كتالي:
1. قيمة واحدة:
تعيين قيمة واحدة لجميع جوانب الهوامش كما يتضح في المثال التالي:
...........
margin: 10px;
...........في هذا المثال، ستكون الهوامش 10 بكسل للجوانب الأربعة (top, right ,bottom, left ) من العنصر.
2. قيم متعددة:
بهذه الطريقة تعيين قيم مختلفة لجوانب الهامش margin كما يتضح في المثال التالي:
...........
margin: 10px 20px 15px 5px;
...........في هذا المثال، ستكون الهوامش 10 بكسل للجانب العلوي، 20 بكسل للجانب الأيمن، 15 بكسل للجانب السفلي، و 5 بكسل للجانب الأيسر.
3. قيمة مستقلة لكل جانب:
مع هذه الطريقة تعيين قيمة مستقلة لكل جانب من جوانب الهوامش margin كما يتضح في المثال التالي:
...........
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
...........في هذا المثال، ستكون الهوامش 10 بكسل للجانب العلوي، 20 بكسل للجانب الأيمن، 15 بكسل للجانب السفلي، و 5 بكسل للجانب الأيسر.قيم الهوامش يمكن تعيينها باستخدام أي وحدة قياس تمتلكها CSS، مثل بكسل (px) أو النسبة المئوية (%) أو الوحدة النسبية (em) وغيرها.
قيم الهوامش تؤثر على تخطيط الصفحة وتباعد العناصر فيها. يمكن استخدام الهوامش لإنشاء تباعدات بين العناصر وتنظيم العناصر في الموقع. يمكن تطبيق الهوامش على أي عنصر HTML، مثل العناصر المضمنة، العناصر النصية، الصور، الجداول، وغيرها.
مثال تطبيقي على Margin
يوضح المثال التالي كيف تقوم الخاصية margin بضبط هوامش العناصر حيث ينشئ الهامش مساحة إضافية حول العنصر ويمكن كذلك ضبط القيم لمساحة margin مباشرة حيث تمثل القيمة الأولى top والثانية right والثالثة bottom والرابعة left لاحظ /ي المثال :
.div1 { border-style: solid;
border-color: rgb(11, 100, 100);
margin: 15px;}
.div2 { border-style: double;
margin:20px 30px;
border-left-width: 10px;
border-right-width: 10px; }
.div3 { border-style: groove ;
margin: 15px 10px 20px;
border-color: rgb(68, 145, 72);}
.div4 { border-style: inset;
margin: 5px 10px 20px 15px;
border-color: rgb(156, 192, 247); }
.div5 { border-style: outset;
margin-left: 30px;
margin-right: 30px;
border-color: rgb(156, 192, 247);}
.div6 { border-style: dashed;
margin-top: 20px;
margin-bottom: 20px;
border-width: 3px; }
لتكن النتيجة
لمشـاهدة الأمثلة بالكامل انقر هنا
الوحدات في CSS والـ Box Model
يمكن استخدام العديد من الوحدات المختلفة في تحديد عناصر الـ Box Model مثل الهامش والحشو والحدود والعرض والارتفاع في CSS. فيما يلي بعض الوحدات الشائعة:
- بكسل (px): هو وحدة القياس الثابتة التي تعطي قيمة محددة بالبكسل. على سبيل المثال، يمكنك تعيين margin: 10px; لتحديد هامش بعرض 10 بكسل.
- النسبة المئوية (%): تستخدم النسبة المئوية لتحديد القيمة بناءً على نسبة مئوية من العنصر الأصلي. على سبيل المثال، يمكنك تعيين width: 50%; لتحديد عرض العنصر بنسبة 50٪ من العنصر الأصلي الذي يحتوي عليه.
- النسبة المئوية للعرض (vw): تستخدم وحدة vw لتحديد القيمة بناءً على نسبة مئوية من عرض النافذة المستعرض. على سبيل المثال، يمكنك تعيين width: 25vw; لتحديد عرض العنصر بنسبة 25٪ من عرض النافذة المستعرض.
- النسبة المئوية للارتفاع (vh): تستخدم وحدة vh لتحديد القيمة بناءً على نسبة مئوية من ارتفاع النافذة المستعرض. على سبيل المثال، يمكنك تعيين height: 50vh; لتحديد ارتفاع العنصر بنسبة 50٪ من ارتفاع النافذة المستعرض.
- الوحدة النسبية (em): تستخدم الوحدة النسبية em لتحديد القيمة بناءً على حجم الخط للعنصر الأصلي. قيمة 1em تعني حجم الخط الأصلي. يمكن استخدامها لتحديد الهامش والحشو والحدود والعرض والارتفاع. على سبيل المثال، يمكنك تعيين margin: 1em; لتحديد هامش بنفس حجم الخط الأصلي.
- الوحدة النسبية للجذر التربيعي (rem): تستخدم الوحدة النسبية rem لتحديد القيمة بناءً على حجم الخط للعنصر الجذري (الجسم). قيمة 1rem تعني حجم الخط للجسم. يمكن استخدامها لتحديد الهامش والحشو والحدود والعرض والارتفاع بناءً على حجم الجسم الأساسي.
هذه بعض الوحدات الشائعة التي يمكن استخدامها في تحديد عناصر الـ Box Model مثل الهامش والحشو والحدود والعرض والارتفاع في CSS. يمكنك اختيار الوحدة المناسبة لاحتياجاتك ولأسلوب التصميم الذي تعمل عليه.
إلى هنا ينتهي هذا المقال الذي تعرفنا فيه على مفهوم الـ Box Model في CSS وكيف يرى المتصفح عناصر صفحة الويب وماهي الخصائص الـ Properties التي توفرها الـ CSS لضبط الهوامش Margins والحدود Borders للعناصر صفحة الويب و أوضحنا طريقة العمل مع هذه الخصائص من خلال أمثلة تطبيقية.في الختام، يُعتبر نموذج الـ Box Model أحد المفاهيم الأساسية في CSS التي تساعد في تصميم وتخطيط صفحات الويب بشكل فعال. يعتبر فهم مكونات الـ Box Model ووحدات القياس المستخدمة في CSS أمرًا ضروريًا للمطورين ومصممي الويب.