التخطيط ـ شرح للـmargin, padding, border

[المغربي الجديد]

التخطيط ـ شرح للـmargin, padding, border


Layout وتعنى التخطيط او تقسيم الصفحات، وقبل ان نبدأ لابد من تذكر كيف كان يتم التخطيط في html .. فعندما كنا نريد تخطيط الموقع كنا نعتمد إعتماد كلي على الجدوال في ذلك وبالشكل الذى نراه مناسب، ولكن بعد أن ظهرت المتصفحات التى تدعم المعايير القياسيه مثل Firefox بشكل سليم ومتوافق مع منظمة الويب التى تدعو للإستغناء عن الجداول في التصميم والتحول الى css الى جانب الكثير من المواقع والمنظمات التى تدعو لإتباع المعايير القياسية في التصميم، كانت الحاجه للإستخدام طريقه جديدة في التخطيط اكثر مرونه وسهوله توافق المعايير القياسية وتظهر بشكل سليم على كافه المتصفحات.

ولمعلوماتك الجداول عندما ظهرت أول مرة في html كانت لغرض واحد فقط هو عرض البيانات المجدولة كالإحصائيات، ثم بعدها ظهرت خاصيه إخفاء الحدود <table border="0"> وإستعان بذلك المصممون وإستخدمت الجداول بشكل جديد وادرج فيها الصور والرسوم…الخ ولازالت حتى اليوم تستخدم الجدول بشكل كبير في التخطيط وبالمواقع التى تستخدم الصور بشكل كبير.


حديثنا اليوم يتلخص في الصورة التاليه :

http://up.arabsgate.com/u/5114/4012/56375.jpg



وهو تخطيط يوضح شكل الصفحه وحدودها
content edge: المحتوى وهو كل ماتحويه الصفحه من نصوص او صور …الخ وتحيط بها البطانة من كافة الجوانب.

padding edge: وهى البطانة وتحيط بها الحدود من كامل الجهات ، لتترك مسافة بين الجسم والمحتوى الداخلي ـ وإذا تم تعينها الى 0 سوف يلتصق محتوى الصندوق بالحافة ( وهو بدايه الهامش ) بدون اى فرغات.

border edge: الحدود وتحيط بها الهوامش او الحواف من كافة الجهات ـ وإذا تم تعينها الى صفر 0 يبقى فقط منها حافة البطانة وبدون أثر.

margin edge: الهوامش أو الحواف عندما تحدد يظهر هذا الهامش بين التصميم وبين حافة الصفحه داخل المتصفح ـ وفي حاله تعيين هذه الهوامش الى صفر 0 سوف يلتصق التصميم بكامل صفحه العرض وما نطلق عليه التصميم المتمدد بكامل الصفحه.

وبالامثلة سنوضح الان الـ margin و padding

http://up.arabsgate.com/u/5114/4012/56376.jpg

كما شاهدت فالـ margin إذا حُددت لأحد عناصر الصفحه ستكون هى المساحه التى تحيط بالصندوق من كافة الجهات وتفصلها عن بقيه العناصر الأخرى ـ ويعرّف داخل css و يكتب بالشكل التالي :
http://up.arabsgate.com/u/5114/4012/56377.jpg



#new { margin: 10px 10px 5px 10px; }
/* OR */
#new {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
/* OR */
#new { margin: 10px 10px 5px; }

/*******************************************/

#new2 { margin: 10px 10px 10px 10px; }
/* OR */
#new2 { margin: 10px; }

اما الـ padding عند تحدديها تكون هى المساحه الداخلية التى تحيط بالمحتوى لتفصل بينه وبين الجسم.

http://up.arabsgate.com/u/5114/4012/56378.jpg

وتعرّف الخاصية داخل css و تكتب بالشكل التالي :

http://up.arabsgate.com/u/5114/4012/56379.jpg


#new { padding: 10px 10px 5px 10px; }
/* OR */
#new {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
/* OR */
#new { padding: 10px 10px 5px; }

/*******************************************/

#new2 { padding: 10px 10px 10px 10px; }
/* OR */
#new2 { padding: 10px; }

نأتي الأن الى الـ border وهى الحدود ـ وتعيين عن طريق 3 خواص فرعية لها (السمك ـ النمط او شكل الحد ـ اللون)

- border-width السمك ويعين بالشكل التالي:

http://up.arabsgate.com/u/5114/4012/56380.jpg


ويعرّف داخل css ويكتب هكذا:

http://up.arabsgate.com/u/5114/4012/56381.jpg


#new { border-width: 10px 10px 5px 10px; }
/* OR */
#new {
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 5px;
border-left-width: 10px;
}
/* OR */
#new { border-width: 10px 10px 5px; }

/*******************************************/

#new2 { border-width: 10px 10px 10px 10px; }
/* OR */
#new2 { border-width: 10px; }


border-color اللون ولن يختلف في طريقة الكتابة عما سبق راجع فقط الدرس السابق لتتذكر خواص الألوان في css

- border-style وهو شكل الحد نفسه وما يلي جميع الأشكال التى يمكن ان تجدها في css2

http://up.arabsgate.com/u/5114/4012/56382.jpg

وتكتب ايضا داخل css بنفس القواعد السابقة والإختصارات.

إذن ومما سبق فعند الطبيق على أحد العناصر يجب ان نحدد ( السمك واللون والشكل ) والكود النهائي يصبح بهذا الشكل:


#new {
border-style: solid;
border-width: 5px;
border-color: red;
}
/* OR */
#new {
border-top-style: solid;
border-top-color: red;
border-top-width: 5px;
border-right-style: solid;
border-right-color: red;
border-right-width: 5px;
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 5px;
border-left-style: solid;
border-left-color: red;
border-left-width: 5px;
}

ولكن لاحظ ان الكتابة بهذا الشكل غير عملية وتجعلنا نكتب الكثير من الأوامر ـ ولهذا توجد طريقة أخيرة مختصرة تجعلنا ندمج 3 خصائص في سطر واحد هكذا:


#new { border: 5px solid red; }

وبنفس الوقت يمكن ان تحدد لكل طرف سمك وشكل معين كما بالكود التالي :


#new {
border-top: 20px solid red;
border-right: 10px solid red;
border-bottom: 2px solid red;
border-left: 7px solid red;
}

[أبو يوسف]

جزاك الله خيرا اخي المغربي الأصيل


#new { margin: 10px 10px 5px 10px; }
/* OR */
#new {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
/* OR */
#new { margin: 10px 10px 5px; }

/*******************************************/

#new2 { margin: 10px 10px 10px 10px; }
/* OR */
#new2 { margin: 10px; }

[سالي الفلسطينية]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

[abohmam]

بارك الله فيك اخانا الفاضل جمال

درس رائع ومفيد كالبقية

لك التحية والشكر

:abc_152:

تم تعديل طريقة عرض الأكواد من خلال استخدام صندوق الأكواد

http://www.7elm3aber.com/up/images/36610016324755554633.jpg

كما اشار الأخ ابو يوسف