CSS min-inline-size
La proprietà CSS3 min-inline-size imposta la larghezza minima in linea
La proprietà min-inline-size consente di definire una larghezza minima lungo l'asse in linea (solitamente orizzontale). È utile per garantire che elementi come pulsanti, card o box di testo non si restringano troppo, assicurando coerenza visiva e leggibilità.
Sintassi
Significato dei valori principali:
-
auto: La dimensione minima si adatta automaticamente in base al contenuto (comportamento predefinito). -
lunghezza: Imposta un valore fisso minimo, come200px,40%,15em, ecc. -
min-content/max-content: Determinano la dimensione minima o massima necessaria in base al contenuto. -
fit-content: Adatta la dimensione al contenuto disponibile, rispettando un limite minimo.
Esempio proprietà: min-inline-size
Codice Esempio: min-inline-size
.min-inline-size-example {
min-inline-size: 300px;
border: 2px solid #268bd2;
padding: 10px;
background-color: #e0f2ff;
font-size: 18px;
line-height: 1.5;
margin: 0 auto;
text-align: center;
display: inline-block;
}
Contenuto Esempio: min-inline-size
Esempio di utilizzo di min-inline-size
In questo esempio, min-inline-size garantisce che l’elemento mantenga una larghezza minima, anche se il contenuto è breve:
CSS e HTML per l'esempio con min-inline-size:
<style>
.min-inline-size-example {
min-inline-size: 300px;
border: 2px solid #268bd2;
padding: 10px;
background-color: #e0f2ff;
font-size: 18px;
line-height: 1.5;
margin: 0 auto;
text-align: center;
display: inline-block;
}
</style>
<div class="min-inline-size-example">
Box con larghezza 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
