Padding in css – Tutoriale css

Proprietatea padding este o directiva prin care putem adauga spatiu liber in jurul continutului. Padding-ul este in interiorul elementelor, deci nu este o parte invisibila, precum sunt marginile. Padding-ul este afectat de culoarea de background, si este folosit de obicei pentru stilizarea paragrafelor, dar nu numai. Ca sa intelegeti mai bine la ce este folosit padding-ul in css, haideti sa vedem cateva exemple.

Un paragraf fara padding – padding:0px;

<p style="background-color:#000000; color:#CCCCCC;">
Acesta este un paragraf fara padding, deci intre text si marginile paragrafului nu este spatiu liber! Textul este lipit de marginile paragrafului, ceea ce nu arata prea bine.
</p>

Rezulta in:

Acesta este un paragraf fara padding, deci intre text si marginile paragrafului nu este spatiu liber! Textul este lipit de marginile paragrafului, ceea ce nu arata prea bine.

Un paragraf CU PADDING

<p style="background-color:#000000; color:#CCCCCC; padding:15px;">
In acest paragraf am folosit padding de 15 pixeli, deci textul nu mai e lipit de marginile paragrafului, ci este inconjurat din fiecare directie cu un spatiu liber de 15 pixeli.
</p>

Rezulta in:

In acest paragraf am folosit padding de 15 pixeli, deci textul nu mai e lipit de marginile paragrafului, ci este inconjurat din fiecare directie cu un spatiu liber de 15 pixeli.

Alte modalitati de a defini padding-ul

Daca specificam padding:0px;, atunci textul sau elementul respectiv nu va fi inconjurat de spatiu liber. Putem specifica si separat un padding pentru fiecare directie, mai jos gasiti codul.

padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

Putem prescurta

padding-top:10px; padding-right:20px; padding-bottom:30px;
padding-left:40px;
este egal cu
padding:10px 20px 30px 40px;

Este recomandat ca pentru body sa specificam padding 0 si margin 0 la inceputul documentului, pentru ca in functie de browser aceste directive sunt deja definite in interiorul browserului, si la fiecare browser este specificat o alta distanta, deci ne putem trezi ca in anumite browsere pagina arata altfel incat in cea care am lucrat cand am facut design-ul.