أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية margin
من خلال استخدام هذه الخاصية نستطيع ترك هوامش خارجية من الطبقة أو الحاوية بحيث لا تكون الطبقات أو الحاويات ملاصقة فى الطبقة حتى يظهر التنسيق بشكل جميل
#p{margin:10px;}
كيف تكتب خاصية margin في css
يتم كتابة خاصية margin بأكثر من شكل ، يمكنك تغيير القيمة كما تناسبك
margin:10px;ترك هوامش خارجية بقيمة 10 بيكسل من جميع الاتجاهاتmargin:5px 20px;ترك هوامش خارجية بقيمة 5 بيكسل من أعلى وأسفل و20 بيكسل من يمين ويسارmargin:5px 8px; 3px 20px;ترك هوامش خارجية بقيمة 5 بيكسل من الأعلى و 8 بيكسل من اليمين و3 بيكسل من الأسفل و20 بيكسل من اليسارmargin-top:100px;ترك هامش خارجي 100 بيكسل من الأعلى فقطmargin-right:100px;ترك هامش خارجي 100 بيكسل من اليمين فقطmargin-bottom:100px;ترك هامش خارجي 100 بيكسل من الأسفل فقطmargin-left:100px;ترك هامش خارجي 100 بيكسل من اليسار فقط
جعل قيمة margin 0
استخدمنا طبقة div ثم فئة class ثم المعرف no-margin ثم استخدمنا كود css وأضفنا للمعرف no-margin خلفية بلون رمادي باستخدام خاصية background وقمنا بإعطاء خاصية margin قيمة 0 أى بدون مسافات داخلية حتى تلاحظ الفرق بين النتيجة الحالية والنتيجة في المثال التالي
<div class='no-margin'>
أهلا بكم في كود ويب
</div>
.no-margin{margin:0;background:#eee;}
النتيجة
أهلا بكم في كود ويب
ترك هوامش خارجية بقيمة 50 بيكسل من جميع الاتجاهات
استخدمنا طبقة div ثم فئة class ثم المعرف margin ثم استخدمنا كود css وأضفنا للمعرف margin خلفية بلون رمادي باستخدام خاصية background وهوامش خارجية بقيمة 10 بيكسل من جميع الاتجاهات
<div class='margin'>
أهلا بكم في كود ويب
</div>
.margin{margin:50px;background:#eee;}
النتيجة
أهلا بكم في كود ويب
ترك هوامش خارجية بقيمة 5 بيكسل من الأعلى والأسفل و 20 بيكسل من اليمين واليسار
<div class='margin-tbrl'>
أهلا بكم في كود ويب
</div>
.margin-tbrl{margin:5px 20px; background:#eee;}
النتيجة
أهلا بكم في كود ويب
ترك هوامش خارجية بقيمة 5 بيكسل من الأعلى و 8 من اليمين و 3 من الأسفل و20 من اليسار
<div class='margin-trbl'>
أهلا بكم في كود ويب
</div>
.margin-trbl{margin:5px 8px 3px 20px; background:#eee;}
النتيجة
أهلا بكم في كود ويب
ترك هوامش خارجية بقيمة 100 بيكسل من الأعلى فقط
<div class='margin-top'>
أهلا بكم في كود ويب
</div>
.margin-top{margin-top:100px; background:#eee;}
النتيجة
أهلا بكم في كود ويب
ترك هوامش خارجية بقيمة 100 بيكسل من اليمين فقط
<div class='margin-right'>
أهلا بكم في كود ويب
</div>
.margin-right{margin-right:100px; background:#eee;}
النتيجة
أهلا بكم في كود ويب
ترك هوامش خارجية بقيمة 100 بيكسل من الأسفل فقط
<div class='margin-bottom'>
أهلا بكم في كود ويب
</div>
.margin-bottom{margin-bottom:100px; background:#eee;}
النتيجة
أهلا بكم في كود ويب
ترك هوامش خارجية بقيمة 100 بيكسل من اليسار فقط
<div class='margin-left'>
أهلا بكم في كود ويب
</div>
.margin-left{margin-left:100px; background:#eee;}
النتيجة
أهلا بكم في كود ويب
شرح خاصية margin لترك هوامش خارجية