Il padding nel CSS
Padding, Cos'è?
La proprietà
padding (imbottitura) è una proprietà che si utilizza per definire lo spazio che ci deve essere tra il contenuto e il bordo del contenitore.
Il
padding può essere specificato per ogni singolo lato attraverso le proprietà:
- padding-top;
- padding-right;
- padding-bottom;
- padding-left.
Esempi: padding: 5px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
Se vogliamo possiamo specificare il nostro padding con una proprietà più corta:
padding:5px 10px 15px 60px;
top padding è 5px
right padding è 10px
bottom padding è 15px
left padding è 60px
padding:25px 50px 75px;
top padding è 25px
right e left paddings sono 50px
bottom padding è 75px
padding:25px 50px;
top e bottom paddings sono 25px
right e left paddings sono 50px
padding:25px;
Tutti e quattro i paddings sono 25px
Esempi Presi da w3schools
Il padding per noi skinner è una proprietà molto importante, ci permette di sistemare il testo dentro un immagine, nella posizione che desideriamo.
un esempio pratico? quando andiamo a creare un menù personalizzato con l'immagine di sfondo, spesso il testo può uscire o essere troppo a destra rispetto alla nostra immagine, in questo caso, ci aiutiamo con il padding.