CSS تنظيم المحتوى

CSS الهوامش

آخر تحيين: 05-01-2015

CSS تموضع المحتوى CSS border : الحدود


نعني بالهوامش ، المسافة التي تفصل بين حدود المحتوى و المحتوى نفسه . و بين حدود المحتوى الحالي و حدود محتوى آخر .لكلّ كتلة نوعان من الهوامش :

  • margin : هوامش خارجية
  • padding: هوامش داخلية

الصورة أسفله مثال لِوسم الفقرة و قد أضفت إليه إطاراً باللّون الأزرق حتىّ أُبرِزالهوامش



اللون الأحمر الشفاف يمثل الهوامش الخارجية و الأخضر الشفاف ، للهوامش الداخلية

margin : الهوامش الخارجية : تقوم بإزاحة الكتل عن بعضها ، بدءا من حدودها نحو الخارج . و تتحكم في تقاربها أو تباعدها .
padding : الهوامش الداخلية : تقوم بإزاحة مُحتوى الكتلة عن الجوانب ، وذلك بدءاً من حدود الكُتلة نحو الدّاخل .

سنرى أمثلة حية ، حتى يتسنى لكم ملاحظة الدور التنظيمي للخاصيتين

CSS padding

لحد الآن ، في الأمثلة التي شاهدناها كان النص أو المحتوى الموجود داخل الكُتل يكاد يلتصِقُ بحدودها . و هذا دليل على ما أقوله ، لنأخذ فقرة و نضيف لها حدودا بالخاصية border .

مشاهدة النتيجة


لإزاحة النّص عن حدود الكتلة سأضيف الخاصية padding و أعطيها القيمة التي أريدُها بالبيكسل .

p
{
  width: 30%;
  border: 1px solid blue;
  padding: 20px;
}
مشاهدة النتيجة


لقد تمّت إزاحة النّص بقيمة 20px عن جميع جوانب إطار الكُتلة . العمليّة جد بسيطة و مُثمرة ، أليس كذلك ؟

CSS margin

لإزاحة ما يوجد خارج جوانب حدود الكُتلة ، نستخدم الخاصية margin . و سنتعامل معها بنفس طريقة padding .
ليبدو ما سنفعله أكثر وضوحا للرؤيا ، سنأخذ وسمي div مثلا .

div
{
   width: 30%;
   border: 1px solid blue;
   padding: 20px;
}
مشاهدة النتيجة


لقد لاحظتُم بأن جوانب الكتلتين تلتَصقان بِبعضهما . حتّى نتحكّمَ نحنُ و نكون المُسيطرين على تحديد المسافة لِمدى تباعُدِها . سنستخدمُ خاصية margin

div
{
   width: 30%;
   border: 1px solid blue;
   padding: 20px;
   margin: 20px;
}
مشاهدة النتيجة


لإزاحة الهوامش الخارجية استعملنا القيمة بالبيكسل . في الحقيقة لدينا قيمة أخرى مهمّة و هي auto و نستعملها عندما نريد للكتلة المعنية أن تتمركز وسط الكتلة التي تحتويها .

لتفعيل القيمة auto من الضروري تحديد عرض الكتلة بواسطة الخاصية width ، و إلا ستأخذ كل مساحة الكتلة التي تحتويها ، و لن يكون لقيمة auto أي فائدة .

مثال استخدام auto :

div
{
   width: 30%;
   border: 1px solid blue;
   padding: 20px;
   margin: auto;  
}
مشاهدة النتيجة


لقد حصلنا على مبتغانا ! لكن التصقت حدود الكتلتين مجدّدا . و السؤال البديهي هو :

ماذا أفعل لإبعاد الكتلين مع العلم أنني أعطيت للخاصية margin القيمة auto ؟

الخاصيات margin و padding كسابقتها border كلها تنتمي إلى عائلة تسمى بخاصيات ميغا "Mega Propriety" . و هذه العائلة تمكننا بإضافة أكثر من قيمة لها .
كما تنبثق من الخاصية border أربع خاصيات ، تمثل كل جهة (أعلى ، يمين ، أسفل ، يسار) من حدود الكتلة . كذلك الخاصيتان margin و padding . ستكون خاصية كل جهة من الهوامش كالتالي :

  • بالنسبة للهوامش الخارجية : margin
    • margin-top : الهامش العلوي
    • margin-right : هامش الجانب الأيمن
    • margin-bottom : الهامش السفلي
    • margin-left : هامش الجانب الأيسر
  • بالنسبة للهوامش الداخلية : padding
    • padding-top : الهامش العلوي
    • padding-right : هامش الجانب الأيمن
    • padding-bottom : الهامش السفلي
    • padding-left : هامش الجانب الأيسر

مثال :

div
{
  margin-top: 110px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 65px;
}



بما أن الخاصية margin تنتمي لعائلة Mega Propriety . و للإستخدام الأنيق و الرّاقي لها : سنُعطيها كل القيم الأربعة دُفعة واحدة مع مراعاة التّرتيب

div{
  margin: 110px 40px 10px 65px;
}

يمكننا أيضا تحديد قيمتين أو ثلاثة فقط ، مثال :

div{
  margin: 40px 20px;
}

في هذه الحالة سيتم إزاحة كتل div ب 40 بيكسل من الأعلى و الأسفل ، و 20 بيكسل عن اليمين و اليسار .
هذه الحالة ، تجيب على سؤالنا السابق في ما يخص القيمة auto . حتى لا تلتصق الكتل ببعضها ، نقوم بإزاحتها من أعلى و أسفل ، كما يبين المثال أسفله :

div
{
   width: 30%;
   border: 1px solid blue;
   padding: 20px;
   margin:10px auto;  
}
مشاهدة النتيجة