السلام عليكم، سنرى في هذا الدرس ماهية الـ Margin و الـ Padding، و سنتعرف على Box Model.
Box Model
لن يتم فهم الـ Margin و الـ Padding بدون معرفة شيء يسمى Box Model.
نموذج Box Model
يَعتبر HTML كل عنصر من عناصره كمستطيل لديه محتوى، Padding، حواف و Margin، نموذج Box Model أعلاه يوضح تنسيق العناصر الأربع السابقة الذكر، و يوجد أيضاً أسفل علامة التبويب 'Styles' في العمود الأيمن للآداة 'Inspect Element' الموجودة في متصفحات الإنترنت الكبرى.
Padding
ما هو Padding ؟
الـ Padding هو الفراغ الموجود بين محتوى العنصر و حوافه، و قد خُصِّص له خمس خواص من طرف HTML تقبلن جميع القيم المطلقة و جميع القيم النسبية و قيمة واحدة من القيم الشاملة ألا وهي القيمة 'INHERIT' التي تورث للعنصر ستايل الخواص من العناصر المحتوية لها، و في حالة خواص الـ Padding القيمة تورث للعنصر الفراغ الموجود بين محتواه و حوافه من العنصر المحتوي له.
خواص Padding
• Padding : هي الخاصية المسؤولة عن التعديل على الفراغ الموجود بين محتوى العنصر و حوافه، و تقبل قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم :
- قيمة واحدة : القيمة تُطبَّق على الفراغات الأربع الموجودة بين محتوى العنصر و حوافه.
- قيمتين : القيمة اليسرى هي المسؤولة عن التعديل على الفراغ الأعلى و الفراغ الأسفل الموجودين بين محتوى العنصر و حوافه، أما القيمة اليمنى فهي المسؤولة عن التعديل على الفراغ الأيمن و الفراغ الأيسر الموجودين بين محتوى العنصر و حوافه.
- ثلاث قيم : القيمة اليسرى هي المسؤولة عن التعديل على الفراغ الأعلى الموجود بين محتوى العنصر و حافته العليا، و القيمة الوسطى هي المسؤولة عن التعديل على الفراغ الأيمن و الفراغ الأيسر الموجودين بين محتوى العنصر و حوافه، أما القيمة اليمنى فهي المسؤولة عن التعديل على الفراغ الأسفل الموجود بين محتوى العنصر و حافته السفلى.
- أربع قيم : القيمة الأولى هي المسؤولة عن التعديل على الفراغ الأعلى الموجود بين محتوى العنصر و حافته العليا، القيمة الثانية هي المسؤولة عن التعديل على الفراغ الأيمن الموجود بين محتوى العنصر و حافته اليمنى، القيمة الثالثة هي المسؤولة عن التعديل على الفراغ الأسفل الموجود بين محتوى العنصر و حافته السفلى، أما القيمة الرابعة فهي المسؤولة عن التعديل على الفراغ الأيسر الموجود بين محتوى العنصر و حافته اليسرى.
• Padding-top : هي الخاصية المسؤولة عن التعديل على الفراغ الأعلى الموجود بين محتوى العنصر و حافته العليا.
• Padding-right : هي الخاصية المسؤولة عن التعديل على الفراغ الأيمن الموجود بين محتوى العنصر و حافته اليمنى.
• Padding-bottom : هي الخاصية المسؤولة عن التعديل على الفراغ الأسفل الموجود بين محتوى العنصر و حافته السفلى.
• Padding-left : هي الخاصية المسؤولة عن التعديل على الفراغ الأيسر الموجود بين محتوى العنصر و حافته اليسرى.
الفيديو التوضيحي للدرس
Margin
ما هو Margin ؟
الـ Margin هو الفراغ الموجود خارج حواف العنصر، و قد خُصِّص له خمس خواص من طرف HTML لديهن قيمة خاصة بإسم 'AUTO' حيث في تواجدها تأمر متصفح الإنترنت بحساب الـ Margin و توضيفه في العنصر، و تقبلن جميع القيم المطلقة و جميع القيم النسبية و قيمة واحدة من القيم الشاملة هي القيمة 'INHERIT' التي تورث للعنصر ستايل الخواص من العناصر المحتوية لها، و في حالة خواص الـ Margin القيمة تورث للعنصر الفراغ الموجود خارج حوافه من العنصر المحتوي له.
خواص Margin
• Margin : هي الخاصية المسؤولة عن التعديل على الفراغ الموجود خارج حواف العنصر، و تقبل قيمة واحدة، أو قيمتين، أو ثلاث قيم، أو أربع قيم :
- قيمة واحدة : القيمة تُطبَّق على الفراغات الأربع الموجودة خارج حواف العنصر.
- قيمتين : القيمة اليسرى هي المسؤولة عن التعديل على الفراغ الأعلى و الفراغ الأسفل الموجودين خارج حواف العنصر، أما القيمة اليمنى فهي المسؤولة عن التعديل على الفراغ الأيمن و الفراغ الأيسر الموجودين خارج حواف العنصر.
- ثلاث قيم : القيمة اليسرى هي المسؤولة عن التعديل على الفراغ الأعلى الموجود خارج حافة العنصر العليا، و القيمة الوسطى هي المسؤولة عن التعديل على الفراغ الأيمن و الفراغ الأيسر الموجودين خارج حواف العنصر، أما القيمة اليمنى فهي المسؤولة عن التعديل على الفراغ الأسفل الموجود خارج حافة العنصر السفلى.
- أربع قيم : القيمة الأولى هي المسؤولة عن التعديل على الفراغ الأعلى الموجود خارج حافة العنصر العليا، القيمة الثانية هي المسؤولة عن التعديل على الفراغ الأيمن الموجود خارج حافة العنصر اليمنى، القيمة الثالثة هي المسؤولة عن التعديل على الفراغ الأسفل الموجود خارج حافة العنصر السفلى، أما القيمة الرابعة فهي المسؤولة عن التعديل على الفراغ الأيسر الموجود خارج حافة العنصر اليسرى.
• Margin-top : هي الخاصية المسؤولة عن التعديل على الفراغ الأعلى الموجود خارج الحافة العليا للعنصر.
• Margin-right : هي الخاصية المسؤولة عن التعديل على الفراغ الأيمن الموجود خارج الحافة اليمنى للعنصر.
• Margin-bottom : هي الخاصية المسؤولة عن التعديل على الفراغ الأسفل الموجود خارج الحافة السفلى للعنصر.
• Margin-left : هي الخاصية المسؤولة عن التعديل على الفراغ الأيسر الموجود خارج الحافة اليسرى للعنصر.
إذا كان عنصر HTML لديه Margin أو Border أو Padding أو بعضهم، يجب العلم أن عرضه أو ارتفاعه لا يُحتسب ضمنهما الـ Margin و الـ Border و الـ Padding، لذا عند تحديد عرض لعنصر HTML بالخاصية 'WIDTH' أو تحديد ارتفاع لعنصر HTML بالخاصية 'HEIGHT' يجب الأخذ بعين الإعتبار أطوال الـ Margin و الـ Border و الـ Padding.
الأكواد المستعملة في هذا الدرس
أتمنى أن تستفيدوا من الدرس