CSS padding-right
La proprietà CSS3 padding-right imposta la spaziatura interna a destra
La proprietà padding-right in CSS3 viene utilizzata per aggiungere spazio tra il bordo destro dell’elemento e il suo contenuto. È essenziale per controllare l’aspetto visivo e l’allineamento interno di contenitori, testi e componenti UI.
Sintassi
Significato dei valori principali:
-
lunghezza: definisce lo spazio sulla destra del contenuto. Esempi:
10px,2em,5%. -
percentuale (%): riferita alla larghezza dell’elemento contenitore.
-
valori negativi: non sono consentiti e possono causare comportamenti imprevisti.
Esempio proprietà: padding-right
Codice Esempio: padding-right
.padding-right-example {
background-color: #2e8b57;
color: white;
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 50px;
border: 2px solid #333;
border-radius: 6px;
width: 70%;
text-align: left;
margin: auto;
}
Contenuto Esempio: padding-right
Esempio di utilizzo di padding-right
In questo esempio, padding-right viene utilizzato per aggiungere spazio interno sul lato destro dell’elemento:
CSS e HTML per l'elemento con padding-right:
<style>
.padding-right-example {
background-color: #2e8b57;
color: white;
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 50px; /* Spazio interno a destra */
border: 2px solid #333;
border-radius: 6px;
width: 70%;
text-align: left;
margin: auto;
}
</style>
<div class="padding-right-example">
Elemento con padding-right di 50px
</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.
Supporto Browser
IP: 216.73.216.118
