CSS padding-inline-start
La proprietà CSS padding-inline-start in CSS3 imposta il padding all'inizio dell'asse inline
La proprietà padding-inline-start, parte delle proprietà logiche CSS3, consente di aggiungere spazio interno sul lato iniziale dell’asse inline di un elemento. Il lato di applicazione si adatta automaticamente alla direzione di scrittura, facilitando layout multilingua.
Sintassi
Significato dei valori principali:
-
valore: definisce la dimensione dello spazio interno all’inizio dell’asse inline. Può essere espresso in unità CSS come
px,em,rem,%, ecc.
Esempio proprietà: padding-inline-start
Codice Esempio: padding-inline-start
.padding-inline-start-example {
writing-mode: horizontal-tb;
direction: rtl;
padding-inline-start: 40px;
background-color: #4caf50;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: padding-inline-start
Esempio di utilizzo di padding-inline-start
Qui viene applicato padding solo all’inizio dell’asse inline, che varia in base alla direzione del testo:
(direction: rtl, padding-inline-start: 50px)
CSS e HTML per l’elemento con padding-inline-start:
<style>
.padding-inline-start-example {
writing-mode: horizontal-tb;
direction: rtl;
padding-inline-start: 50px;
background-color: #4caf50;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="padding-inline-start-example">
Padding all'inizio della linea (inline-start)
</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
