
أهلا بكم في درس جديد من دروس 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;}
النتيجة
أهلا بكم في كود ويب
شرح خاصية padding لترك مسافات داخلية من الطبقة أو الحاوية