مثل ماهو موجود في العنوان , ماهي وظيفة الـ padding , margin ؟ لاني بتلخبط كتير بينهم !!
وشوفت شروحات بتتكلم عنهاا بس ما فهمت !!
ياريت لو احد يشرحلي هياا اكون شآكر له ..
| |
مثل ماهو موجود في العنوان , ماهي وظيفة الـ padding , margin ؟ لاني بتلخبط كتير بينهم !!
وشوفت شروحات بتتكلم عنهاا بس ما فهمت !!
ياريت لو احد يشرحلي هياا اكون شآكر له ..
__________________
- My Name is Ahmed
- My Favorites Book : Being Happy
- Finally : If You Want To Be Happy Happy Use
السلام عليكم ورحمة الله
اول شي يرجى مشاهد الصورة للتوضيح
الmarging هيا المحيط الخارجي للوسم وهي تتعلق ببعد الوسم بمقدار عن الوسوم الاخرى
اما الpadding فهي علاقة الوسم بالمحتوى الداخلي التابع له اي الفاصل بينه وبين ابناءه
فلو وضعنا الكود التالي لوسم الطبقة div او الtr
لوجدنا ان المجتوى الداخلي للوسم قد ابعد عن اتجاه اليسار مقدار 100 بيكسلكود PHP:padding-left:100px;
يمكن ايضا اضافة كافة الاتجاهت حسب الرغبة
اما الخاصيةفالكثير من الاخوة يفشلون في توسيط الوسوم وبخاصة عند المعايير القياسية والتي يعتمدها متصفح فاير فوكسكود PHP:margin
فكما ذكرنا انه الخاصبة تعتمد العلاقة بين الوسم والوسوم الاخرى وبشكل خاص على الوسم الحاوي اي الاب
فلو وضعنا القيمةلوجدنا ان الوسم تمت ازاحته مقدار 100 بيكسل بشكل كامل عن الوسم الاب اواذاكان اب عن البدي للصفحةكود PHP:margin-right:100px
فلتوسيط الوسم ضمن المتصفح بشكل صحيح على متصفحات المعايير القياسيية نضع التالي
الاجراء يعتمد علىوبكود PHP:margin-left
كيفية العمل الصحيحكود PHP:margin-right
فبذلك يكون موقع العنصر اتوماتيكي باتجاه اليسار واليمين والافتراضي في المتصفحات هو 0 لاتجاه الصفحة طبعا لاننسى وضع القيمة للوسم الاب text-align:centerكود PHP:margin-left:auto;
margin-right:auto;
مثال كامل
بسم الله الرحمن الرحيم وماؤتيتم من العلم الا قليل صدق الله العظيمكود PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>بسم الله الرحمن الرحيم</title>
</head>
<body style="text-align:center">
<div style=" margin-left:auto;margin-right:auto; background-color: #FFFF00;width: 290px; height: 325px">
بسم الله الرحمن الرحيم</div>
</body>
</html>
شكرا أخي المهاجر على الفائده واستفدت منها فعلا
ضوابط المشاركة
رد مع اقتباس