بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
مقدمة عن الخاصية padding
تحدثنا في الدرس الماضي باختصار عن الخاصية padding ، وشرحنا الخاصية margin ، وقلنا بأن الخاصية padding تحدد مقدار الإزاحة الداخلية لعنصر html وتجعله يتمدد ، غير ذلك فكل ما قلناه عن margin ينطبق على padding ، فهي تستخدم مجردة بقيمة واحدة أو قيمتين أو أربع ، كما تضاف لها الإتجاهات الأربع بنفس الطريقة.
التطبيق العملي للخاصية padding
كعادتنا سنكتب كود html :
في البداية سنعطي تنسيقات عادية :
والنتيجة كما هي متوقعة:
والآن سنطبق الخاصية padding على كل بلوك على حدا بطرق مختلفة :
والنتيجة هذه هي:
وكما تلاحظون الديفات تمددت على حسب الإتجاهات والقيم التي حددناها.
الإزاحة الإفتراضية للمتصفحات
كما سبق وأشرنا في الدرس الماضي ، كل عنصر html له مقدار margin ومقدار padding يبدأ به ويختلف من متصفح إلى آخر ، وهذا ينطبق على بقية خصائص css ، وهو ما يصطلح عليه ب default stylesheet .
سنشرح هذه الإعدادات الإفتراضية في درس مستقل لكن ما يهمنا الآن هو padding و margin ، فقبل أن نبدأ أي تصميم ينبغي لنا أن نعيد قيمتهما إلى الصفر كبداية وبعد ذلك نبدأ في فرض قواعدنا، وهكذا نضمن تصميم متوافق إلى حد كبير مع جميع المتصفحات وهو ما يصطلح عليه ب Cross Browser Compatibility التوافق مع المتصفحات المختلفة .
ليكن مثلا الديف التالي:
سنعطيه أولا تنسيقات عادية وهذه هي مع النتيجة:
لاحظ الهامشين الفارغين بين الديف وحدود الصفحة.
سنضع الآن ل padding و margin القيمة 0 ، وهذا لكل عناصر الصفحة وسنرى ماذا سيحدث :
وكما ترى اختفى الهامشان.
ماقمنا به الآن يندرج ضمن ما يسمى في لغة css ب reset ، وهي إعادة الإعدادات الإفتراضية للمتصفح إلى القيمة 0 ، سنصل إلى التفصيل في هذا في درس مستقل ، وأنت مخير بين كتابة كل عناصر الصفحة ثم وضع الأصفار للخاصيتين أو أن تكتب بكل بساطة العلامة * وهي تعني كل عناصر الصفحة.
توسيط العناصر من النوع block في الصفحة
ليكن نفس المثال الماضي ، سنحاول توسيط الديف في الصفحة بإعطاء margin القيمة auto من اليمين واليسار :
والنتيجة كالتالي:
انتهينا من موضوع الإزاحة ، وسنبدأ إن شاء الله في الدرس القادم مع شرح الوضعيات ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.