دليل CSS الأساسي

نموذج الصندوق CSS

تزيل الهوامش منطقة حول الحدود، وتفرق بين الصناديق.

خصائص margin في CSS تسمح لك بتعيين الهوامش على جوانب صندوق العنصر. الهوامش ليس لهاbackground-color، وهي شفافة تمامًا.

يمكنك استخدام خصائص margin الفردية بسهولة لتعيين هامش مختلف لكل جانب من جوانب العنصر (مثل، القمة، اليسرى، الأسفل أو اليمين).

مثال

h1　{margin-bottom:　20px;}
p　{margin-left:　10px;margin-right:　30px;}

خصائص margin هي خصائص مختصرة تهدف إلى تجنب إعداد كل هامش بشكل منفرد: margin-top،margin-right،margin-bottom و margin-left.

مثال

h1　{　margin:　0　10px;}
p　{margin:　25px　50px　75px　100px;}

يمكن استخدام هذا الرمز التلافي قيمة واحدة، أو إثنين، أو ثلاثة أو أربعة من الفواصل الفاصلة.

إذا تم ضبطقيمة واحدة، تطبق على جميع الأربعة جوانب.
إذا تم تحديدثلاثة قيم، فإن القيمة الأولى تطبق على القمة والأسفل، والقيمة الثانية تطبق على اليسرى واليمنى.
إذا تم تحديدثلاثة قيم، فإن القيمة الأولى تطبق على القمة، والقيمة الثانية تطبق على اليسرى واليمنى، والقيمة الأخيرة تطبق على الأسفل.
إذا تم تحديدأربعة قيم، فإنها تطبق على التوالي في القمة، اليمنى، الأسفل واليسرى.