تعريف خـاصيـة Margin

  • تعتبـر بمثـابه هوامـش خارجيـة حواليـن العنـصر

  • إذا قلنا للعنصر Margin : 10px فهذا معناه اننا سنقوم بعمل هوامش خارجيه حوالين العنصر من جميع الجوانب ( من الاعلى والاسفل واليسار واليمين ) بمقدر 10 بكسـل

  • إذا قلنا للعنصر margin : 5px 10px فهذا معناه اننا سنقوم بعمل هوامش خارجيه حوالين العنصر بمقدار 5 بكسـل من الاتجـاه الاعلى والاسفـل وبمقدار 10 بكسـل من الاتجاه اليمين واليسـار

  • إذا قلنا للعنصر margin : 2px 3px 5px فهذا معناه اننا سنقوم بعمل هوامش خارجيه حوالين العنصر بمقدار 2 بكسـل من الاتجاه الاعلى و بمقدار 3 بكسـل من الاتجاه اليمين واليسار وبمقدار 5 بكسل من الاتجاه الاسفل

  • إذا قلنا للعنصر margin : 10px 3px 5px 8px فهذا معناه اننا سنقوم بعمل هوامش خارجيه حوالين العنصر بمقدار 10 بكسل من الاعلى و 3 بكسـل من اليمين و 5 بكسـل من الاسفل و 8 بكسـل من اليـسار ( مع عقارب الساعه -- اعلى يمين اسفل يسـار )

تعريف خـاصيـة Padding

تعتبـر بمثـابه هوامـش داخلـيه للعنـصر او تستطيع القـول انه العلاقه بين العنصر نفـسه وما بداخله من أبناء

  • إذا قلنا للعنصر padding: 10px فهذا معناه اننا سنقوم بعمل هوامش داخليـة بداخل العنصر من جميع الجوانب ( من الاعلى والاسفل واليسار واليمين ) بمقدر 10 بكسـل

  • إذا قلنا للعنصر padding: 5px 10px فهذا معناه اننا سنقوم بعمل هوامش داخليـة بداخلالعنصر بمقدار 5 بكسـل من الاتجـاه الاعلى والاسفـل وبمقدار 10 بكسـل من الاتجاه اليمين واليسـار

  • إذا قلنا للعنصر padding: 2px 3px 5px فهذا معناه اننا سنقوم بعمل هوامش داخليـة بداخل العنصر بمقدار 2 بكسـل من الاتجاه الاعلى و بمقدار 3 بكسـل من الاتجاه اليمين واليسار وبمقدار 5 بكسل من الاتجاه الاسفل

  • إذا قلنا للعنصر padding: 10px 3px 5px 8px فهذا معناه اننا سنقوم بعمل هوامش داخليـة بداخل حوالين العنصر بمقدار 10 بكسل من الاعلى و 3 بكسـل من اليمين و 5 بكسـل من الاسفل و 8 بكسـل من اليـسار ( مع عقارب الساعه -- اعلى يمين اسفل يسـار )

أمثلـة لتلاحظ الفرق بينهم

1) أنت الآن جـالس فى غرفتك فحركتك بالنسـبه للغرفـة يعتبر هذا Padding فالغرفـة مثل الأب وأنت الابن بالنسبه للغرفه وقلنا ان العلاقه بين حركه الابن بالنسبه للاب تعتبر Padding وأما Margin فيعتبر ها هنا المسافه بين الغرف وبعضها البعض بمعنى الهامش بين غرفتك والغرفه المجاورة لك تعتبر 0 اما بين غرفتك وغرفه بعيده عنك فهنا يعتبر Margin المسافه بين الغرف

2) البوسـتات الـتى تشـاهدها على الفيس بوك فالكلام الذى يكون بداخل البوست يعتبـر Padding بالنسـبه للبـوست نفسـه والهوامش بين كـل بوست وأخر يعتبر Margin

3) بالنسبه اذا قمنا بعمل ثلاثه div وبداخل كل div يشمل براجراف معين ...

عندما تريد ان تقوم بعمل مسافات بين الثلاثه div

سوف نستخدم margin ( هوامش خارجيه )

اما اذا كنت تريد تحريك ما بداخل العنصر وهو ال div

سوف نقوم بعمل padding ( هوامش داخليه )

وبهذا قد انتهيا من هذا المقال .. ارجو ان يكون قد افادكم

وفى المرة المقبله باذن الله

سأتحدث عن ما الذى تحدثه هاتان الخاصيتان فى ال width و height

والسلام عليكم ورحمه الله