شرح خاصية margin لترك هوامش خارجية

أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس 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;}

النتيجة

أهلا بكم في كود ويب