CSS padding-left
La proprietà CSS3 padding-left
imposta la spaziatura interna a sinistra
La proprietà padding-left
in CSS3 è utilizzata per aggiungere spazio interno tra il bordo sinistro dell’elemento e il suo contenuto. È particolarmente utile per regolare l’allineamento del testo o di altri elementi all’interno di contenitori.
Sintassi
Significato dei valori principali:
-
lunghezza: imposta uno spazio specifico sulla sinistra dell’elemento. Esempi:
15px
,2em
,5%
. -
percentuale (%): calcolata rispetto alla larghezza del contenitore padre.
-
valori negativi: non sono ammessi. Inserire valori negativi genera risultati inattesi.
Esempio proprietà: padding-left
Codice Esempio: padding-left

.padding-left-example {
background-color: #6a5acd;
color: white;
font-size: 20px;
padding-left: 40px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
border: 2px solid #333;
border-radius: 6px;
width: 70%;
text-align: left;
margin: auto;
}
Contenuto Esempio: padding-left
Esempio di utilizzo di padding-left
In questo esempio, padding-left
viene utilizzato per aggiungere spazio interno sul lato sinistro dell’elemento:
CSS e HTML per l'elemento con padding-left:
<style>
.padding-left-example {
background-color: #6a5acd;
color: white;
font-size: 20px;
padding-left: 40px; /* Spazio interno a sinistra */
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
border: 2px solid #333;
border-radius: 6px;
width: 70%;
text-align: left;
margin: auto;
}
</style>
<div class="padding-left-example">
Elemento con padding-left di 40px
</div>
Leggenda Proprietà:

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.