شرح خاصية padding لترك مسافات داخلية من الطبقة أو الحاوية

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

#p{padding:10px;}

كيف تكتب خاصية padding في css

يتم كتابة خاصية padding بأكثر من شكل

padding:10px; ترك مسافات داخلية بقيمة 10 بيكسل من جميع الاتجاهات
padding:5px 20px; ترك مسافات داخلية بقيمة 5 بيكسل من أعلى وأسفل و20 بيكسل من يمين ويسار
padding:5px 8px; 3px 20px; ترك مسافات داخلية بقيمة 5 بيكسل من الأعلى و 8 بيكسل من اليمين و3 بيكسل من الأسفل و20 بيكسل من اليسار
padding-top:100px; ترك مسافات داخلية 100 بيكسل من الأعلى فقط
padding-right:100px; ترك مسافات داخلية 100 بيكسل من اليمين فقط
padding-bottom:100px; ترك مسافات داخلية 100 بيكسل من الأسفل فقط
padding-left:100px; ترك مسافات داخلية 100 بيكسل من اليسار فقط

جعل قيمة padding 0

استخدمنا طبقة div ثم فئة class ثم المعرف no-padding ثم استخدمنا كود css وأضفنا للمعرف no-padding خلفية بلون رمادي باستخدام خاصية background وقمنا بإعطاء خاصية padding قيمة 0 أى بدون مسافات داخلية حتى تلاحظ الفرق بين النتيجة الحالية والنتيجة في المثال التالي

<div class='no-padding'>
أهلا بكم في كود ويب
</div>

.no-padding{padding:0;background:#eee;}

النتيجة

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

ترك مسافات داخلية بقيمة 50 بيكسل من جميع الاتجاهات

استخدمنا طبقة div ثم فئة class ثم المعرف padding ثم استخدمنا كود css وأضفنا للمعرف padding خلفية بلون رمادي باستخدام خاصية background ومسافات داخلية بقيمة 10 بيكسل من جميع الاتجاهات

<div class='padding'>
أهلا بكم في كود ويب
</div>

.padding{padding:50px;background:#eee;}

النتيجة

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

ترك مسافات داخلية بقيمة 5 بيكسل من الأعلى والأسفل و 20 بيكسل من اليمين واليسار

<div class='padding-tbrl'>
أهلا بكم في كود ويب
</div>

.padding-tbrl{padding:5px 20px; background:#eee;}

النتيجة

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

ترك مسافات داخلية بقيمة 5 بيكسل من الأعلى و 8 من اليمين و 3 من الأسفل و20 من اليسار

<div class='padding-trbl'>
أهلا بكم في كود ويب
</div>

.padding-trbl{padding:5px 8px 3px 20px; background:#eee;}

النتيجة

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

ترك مسافات داخلية بقيمة 100 بيكسل من الأعلى فقط

<div class='padding-top'>
أهلا بكم في كود ويب
</div>

.padding-top{padding-top:100px; background:#eee;}

النتيجة

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

ترك مسافات داخلية بقيمة 100 بيكسل من اليمين فقط

<div class='padding-right'>
أهلا بكم في كود ويب
</div>

.padding-right{padding-right:100px; background:#eee;}

النتيجة

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

ترك مسافات داخلية بقيمة 100 بيكسل من الأسفل فقط

<div class='padding-bottom'>
أهلا بكم في كود ويب
</div>

.padding-bottom{padding-bottom:100px; background:#eee;}

النتيجة

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

ترك مسافات داخلية بقيمة 100 بيكسل من اليسار فقط

<div class='padding-left'>
أهلا بكم في كود ويب
</div>

.padding-left{padding-left:100px; background:#eee;text-align:left;}

النتيجة

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