CSS padding-block-start
La proprietà CSS padding-block-start in CSS3 imposta il padding all'inizio del blocco
La proprietà padding-block-start consente di aggiungere spazio interno all'inizio dell'asse logico del blocco. È l’equivalente logico di padding-top, ma si adatta automaticamente a direzioni di scrittura verticali o da destra verso sinistra.
Sintassi
Significato dei valori principali:
-
valore: definisce la quantità di spazio interno all’inizio del blocco. Può essere espressa in unità CSS standard come
px,em,rem,%, ecc.
Esempio proprietà: padding-block-start
Codice Esempio: padding-block-start
.padding-block-start-example {
writing-mode: horizontal-tb;
padding-block-start: 30px;
background-color: #50a14f;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: padding-block-start
Esempio di utilizzo di padding-block-start
In questo esempio, la proprietà padding-block-start aggiunge spazio all’inizio del blocco, cioè in alto se la direzione del testo è quella predefinita (top-to-bottom):
(padding-block-start: 30px)
CSS e HTML per l’elemento con padding-block-start:
<style>
.padding-block-start-example {
writing-mode: horizontal-tb;
padding-block-start: 30px;
background-color: #50a14f;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="padding-block-start-example">
Padding logico all'inizio
</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
