شرح خاصية 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 بيكسل من اليسار فقط

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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