لو أن أحدا أخبرني ! \\ Padding & Margin

direction:rtl;
من المشاكل المألوفة عند التعامل في CSS هو موضوع Padding و Margin .

لنبدأ بداية صحيحة علي أن أؤكد وبشدة ان اي عنصر مثلا < div > هو عبارة عن مستطيل او بلوك.

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

العرض – ولمزيد من التوضيح شاهد الرسم التالي :

كما موضح بالصورة انا اتعامل مع البوكس \ الصندوق \ المستطيل .. يوجد لدي طول وعرض للمحتوى الداخلي .. يوجد لدي padding و border و بالتأكيد الحد

يمكن ان يكون له حجم.

اذا كيف يمكن ان اقيس ابعاد الصندوق بالكامل ؟

طول الصندوق = طول المحتوى + حجم الحد الاعلى + حجم الحد الادنى + حجم بادنج الاعلى + حجم بادنج الاسفل

عرض الصندوق = عرض المحتوى + حجم الحد الايمن + حجم الحد الايسر + حجم بادنج اليمين + حجم بادنج اليسار

نصل للنقطة الأهم : ما هو الماريجن وما الفرق بينه وبين البادنج ؟

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

بمعنى اخر هو المسافة بين المحتوى الداخلي وبين border

اما المريجن هو علاقة الصندوق بغيره من الصناديق الخارجية ومن صفحة الويب الموجود بداخلها او بمعنى آخر هو المسافة

بين border وغيره من الصناديق.

هل تريد فعليا رؤية كل الصناديق التي تحتويها صفحته لكي تحدد اماكنها وعلاقاتها بغيرها بوضوع .. جرب ان تض

ع الكود التالي

بداخل ملف CSS

ستكون النتيجة مشابهة لـ

توضيح أخير بالكود :

شكرا لحسن متابعتكم

فدا

Why HTML 5 ?

Because it is more elegant !

Before knowing what HTML 5 really is, i said for myself .. why they keep moving from one  version to another, then a dear friend of mine told me that it is actually more flexible than the old one.

As you know, when coding a page we program using [ div ] s .. we keep writing [ <div id = " .... " > .... </div> ], giving it the ids header, main, navigation, footer and more, html 5 gives us new tags , most used as names for divs, like <header></header>,<nav></nav>,<footer></footer> and more.

Another cool thing was provided in html 5, that are new functions for embedding audio, video and graphics directly.

For more information about tags inserted or deleted in HTML 5, please visit this link.

Thank you

Fida

Coolest Website

There is no more better than this for a first post, i can not be more helpful for students than giving them the super fabulous website W3SCHOOLS.

This website is the coolest for beginners, or even for using as a  reference for proffesional developers.

Enjoy.

Fida