CSS padding-block-end
La proprietà CSS padding-block-end in CSS3 imposta lo spazio in fondo al blocco
La proprietà padding-block-end, introdotta con le proprietà logiche di CSS3, permette di definire il padding alla fine dell’asse del blocco. È equivalente a padding-bottom nella maggior parte dei casi, ma supporta automaticamente altre direzioni di scrittura, come quelle verticali o RTL.
Sintassi
padding-block-end: valore;
Significato dei valori principali:
-
valore: indica la dimensione del padding in fondo al blocco logico. Può essere espresso in
px,em,%,rem, ecc.
Esempio proprietà: padding-block-end
Codice Esempio: padding-block-end
CODE: CSS
.padding-block-end-example {
writing-mode: horizontal-tb;
padding-block-end: 40px;
background-color: #50a14f;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: padding-block-end
Esempio di utilizzo di padding-block-end
In questo esempio, viene impostato un padding solo alla fine del blocco:
Spazio interno solo in fondo
(padding-block-end: 40px)
(padding-block-end: 40px)
CSS e HTML per il blocco con padding-block-end:
<style>
.padding-block-end-example {
writing-mode: horizontal-tb;
padding-block-end: 40px;
background-color: #50a14f;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="padding-block-end-example">
Spazio interno in fondo
</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
