CSS block-size
La proprietà CSS block-size (CSS Logical Properties, CSS3/4) definisce la dimensione dell'elemento nella direzione del blocco
La proprietà block-size è una proprietà logica che imposta la dimensione di un elemento lungo l'asse del blocco, che corrisponde solitamente all'altezza in scritture orizzontali e alla larghezza in scritture verticali. Questa proprietà sostituisce l'uso diretto di height in contesti multilingua e layout adattabili, migliorando la flessibilità e l’internazionalizzazione.
Sintassi
Significato dei valori principali:
auto: La dimensione del blocco si adatta automaticamente in base al contenuto o al contenitore.
: Valore fisso in unità CSS comepx,em,rem. Esempio:200px.: Percentuale rispetto alla dimensione del contenitore nel blocco asse. Esempio:50%.
Esempio proprietà: block-size
Codice Esempio: block-size
.block-size-box {
inline-size: 300px; /* larghezza logica */
block-size: 150px; /* altezza logica */
background-color: #4a90e2;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 20px;
margin: 20px auto;
}/* Scrittura verticale */.block-size-box[dir="rtl"] {
writing-mode: vertical-rl;
}
Contenuto Esempio: block-size
Esempio di utilizzo della proprietà block-size
In questo esempio, il contenitore ha una dimensione del blocco fissa di 150px, indipendentemente dalla direzione del testo:
CSS e HTML per l'elemento con block-size:
<style>
.block-size-box {
inline-size: 300px; /* larghezza logica */
block-size: 150px; /* altezza logica */
background-color: #4a90e2;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 20px;
margin: 20px auto;
}
/* Cambiamo la direzione della scrittura per mostrare l'effetto */
.block-size-box[dir="rtl"] {
writing-mode: vertical-rl;
}
</style>
<div class="block-size-box">
Dimensione blocco fissa 150px
</div>
<div class="block-size-box" dir="rtl">
Scrittura verticale, block-size = altezza logica
</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
