ماهي أفضل طريقة لتحديد الـpadding في css

[moh91]

السلام عليكم ورحمة الله وبركاته

مرحبا ،، أنا مبتدأ في الـcss


و أواجه صعوبة في تحديد المكان الذي أريد العمل عليه والذي يتم عبر padding
ماهي أفضل طريقة لتحديد موقعه ؟

هل يمكن إعطاء الصفحة مقاسات كالذي إستخدمها في الفوتوشوب ، ثم القيام بإعطائه قياسات كالذي في الفوتوشوب

أتمنى تكونوا فهمتوا عليي

[NASSER88]

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

وهي بهذه الصيغة

padding:top-px right-px bottom-px left-px 

فمثلا لو عندك صندوق يحتوي على نص وهذا الصندوق له حدود فانك تستطيع ان تحدد المسافه بين الحدود وبين النص عن طريق padding

مثلا هذا الكود

padding:10px 10px 10px 20px 

سيقوم بعمل مسافه 10 بكسل بين الحد الاعلى و النص وبين الحد الايمن والنص وبين الحد الاسفل والنص وسيقوم بعمل مسافه 20 بكسل بين الحد الايسر والنص


للمزيد http://www.w3schools.com/css/css_padding.asp


ناصر

[حمايه]

كما وضح الاخ NASSER88 خاصيه الـ padding فهي تعمل مسافات بين النص او العنصر الذي ادخله وبين اطراف او ابعاد الصندوق الحاوي له من النواحي الاربعه
فلو كتبت الكود على الشكل التالي

 padding:10px 5px 20px 30px; 

سيقوم بعمل ازاحه من الاعلى بمقدار 10 بيكسل ومن اليمين بمقدار 5 ومن الاسفل بمقدار 20 ومن اليسار بمقدار 30
اما اذا كتبته على الشكل التالي

padding:10px 5px; 

فسيقوم بعمل ازاحه من الاعلى والاسفل بمقدار 10 بيكسل ومن اليمين واليسار بمقدار 5 بيكسل
اما لو كتبته بالشكل التالي

padding:10px; 

فسيقوم بعمل ازاحه من كافة الجوانب بمقدار 10 بيكسل

من موضوعك اجد انك تريد تحديد موقع لعنصر بالصحفه وانا انصحك بإستخدام الـposition
فمثلا اذا قمت بإضافة الشكل التالي

position:absolute; 

فمعنى ذلك انك جعلت هذا العنصر حر التحرك في اي مكان بناءً على تحديد اتجاهات له من اليمين واليسار في مساحة حجم الديف الذي بداخله بمعنى انك ممكن تضع بالاضافه الي هذا الـposition الاضافات التاليه

top:50px;
left:10px; 

وهكذا
ويوجد ايضا position بإسم relative وهذا يعتمد على ابعاد الصفحه ذات نفسها

يمكنك قرائة المزيد عن دروس الـ css و وضعيات العنصر من هذا الموقع
( رابط ) http://cliprz-php.com/show_css2_basic_tutorials

[moh91]

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

وهي بهذه الصيغة

padding:top-px right-px bottom-px left-px 

فمثلا لو عندك صندوق يحتوي على نص وهذا الصندوق له حدود فانك تستطيع ان تحدد المسافه بين الحدود وبين النص عن طريق padding

مثلا هذا الكود

padding:10px 10px 10px 20px 

سيقوم بعمل مسافه 10 بكسل بين الحد الاعلى و النص وبين الحد الايمن والنص وبين الحد الاسفل والنص وسيقوم بعمل مسافه 20 بكسل بين الحد الايسر والنص


للمزيد ( رابط ) http://www.w3schools.com/css/css_padding.asp


ناصر

ما قصرت خوي ناصر
ربي يجزاك خير و يخليك

كما وضح الاخ NASSER88 خاصيه الـ padding فهي تعمل مسافات بين النص او العنصر الذي ادخله وبين اطراف او ابعاد الصندوق الحاوي له من النواحي الاربعه
فلو كتبت الكود على الشكل التالي

 padding:10px 5px 20px 30px; 

سيقوم بعمل ازاحه من الاعلى بمقدار 10 بيكسل ومن اليمين بمقدار 5 ومن الاسفل بمقدار 20 ومن اليسار بمقدار 30
اما اذا كتبته على الشكل التالي

padding:10px 5px; 

فسيقوم بعمل ازاحه من الاعلى والاسفل بمقدار 10 بيكسل ومن اليمين واليسار بمقدار 5 بيكسل
اما لو كتبته بالشكل التالي

padding:10px; 

فسيقوم بعمل ازاحه من كافة الجوانب بمقدار 10 بيكسل

من موضوعك اجد انك تريد تحديد موقع لعنصر بالصحفه وانا انصحك بإستخدام الـposition
فمثلا اذا قمت بإضافة الشكل التالي

position:absolute; 

فمعنى ذلك انك جعلت هذا العنصر حر التحرك في اي مكان بناءً على تحديد اتجاهات له من اليمين واليسار في مساحة حجم الديف الذي بداخله بمعنى انك ممكن تضع بالاضافه الي هذا الـposition الاضافات التاليه

top:50px;
left:10px; 

وهكذا
ويوجد ايضا position بإسم relative وهذا يعتمد على ابعاد الصفحه ذات نفسها

يمكنك قرائة المزيد عن دروس الـ css و وضعيات العنصر من هذا الموقع
(( رابط ) رابط ) ( رابط ) http://cliprz-php.com/show_css2_basic_tutorials

بالفعل position هذا ما كنت أقصده
معذرة إختلطت علي الأمور ولم أميز بين الاثنين
شكرا على الإيضاح و سأحاول الإطلاع على الدروس
الله يعطيك العافية

[Mostafa Maher]

لسهولة التعامل مع التصميم و الـ Layout قم بالتحديد على العناصر من خلال إظهار الـ border على الوسوم الإنشائية div و span وغيرها أثناء التصميم، لتمكنك من معرفة حدودها وبالتالي يسهل عليك التحكم بها، وبعد الفراغ من ضبطها يمكنك إزالة الـ border أو إبقاءه حسب التصميم.