CSS padding-inline-end
La proprietà CSS padding-inline-end in CSS3 imposta il padding alla fine dell'asse inline
La proprietà padding-inline-end, parte delle proprietà logiche di CSS3, permette di definire lo spazio interno sul lato finale dell’asse inline di un elemento. Questa posizione dipende dalla direzione del testo (direction), quindi si adatta automaticamente a scritture da sinistra a destra o da destra a sinistra.
Sintassi
Significato dei valori principali:
-
valore: la dimensione dello spazio interno alla fine dell'asse inline. Può essere espressa in unità CSS standard, come
px,em,rem,%, ecc.
Esempio proprietà: padding-inline-end
Codice Esempio: padding-inline-end
.padding-inline-end-example {
writing-mode: horizontal-tb;
direction: rtl;
padding-inline-end: 40px;
background-color: #ff6f61;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: padding-inline-end
Esempio di utilizzo di padding-inline-end
In questo esempio, viene aggiunto padding solo al lato finale dell'asse inline, che dipende dalla direzione del testo:
(direction: rtl, padding-inline-end: 50px)
CSS e HTML per l’elemento con padding-inline-end:
<style>
.padding-inline-end-example {
writing-mode: horizontal-tb;
direction: rtl;
padding-inline-end: 50px;
background-color: #ff6f61;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="padding-inline-end-example">
Padding alla fine della linea (inline-end)
</div>
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.108
