CSS min-block-size
La proprietà CSS3 min-block-size imposta la dimensione minima del blocco
La proprietà min-block-size serve a definire l’altezza minima che un elemento deve avere lungo l’asse del blocco. È particolarmente utile per layout responsive o contenitori che devono mantenere una certa altezza minima per coerenza visiva, anche in assenza di contenuti sufficienti.
Sintassi
Significato dei valori principali:
-
auto: L'altezza minima è determinata automaticamente in base al contenuto (valore predefinito). -
lunghezza: Imposta una dimensione minima fissa, ad esempio100px,10em,30%, ecc. -
min-content/max-content: Specificano limiti basati sulla quantità minima o massima di contenuto necessaria. -
fit-content: L’altezza si adatta al contenuto entro il limite minimo stabilito.
Esempio proprietà: min-block-size
Codice Esempio: min-block-size
.min-block-size-example {
min-block-size: 150px;
border: 2px dashed #d75f00;
padding: 10px;
background-color: #fff5e6;
font-size: 18px;
line-height: 1.4;
width: 80%;
margin: 0 auto;
text-align: center;
}
Contenuto Esempio: min-block-size
Esempio di utilizzo di min-block-size
In questo esempio, min-block-size garantisce un’altezza minima anche quando il contenuto è breve:
CSS e HTML per l'esempio con min-block-size:
<style>
.min-block-size-example {
min-block-size: 150px;
border: 2px dashed #d75f00;
padding: 10px;
background-color: #fff5e6;
font-size: 18px;
line-height: 1.4;
width: 80%;
margin: 0 auto;
text-align: center;
}
</style>
<div class="min-block-size-example">
Blocco con poco contenuto ma altezza minima garantita.
</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
