CSS width
La proprietà CSS width imposta la larghezza di un elemento
La proprietà width controlla la larghezza di un elemento, potendo essere impostata con valori fissi, percentuali o parole chiave come auto, max-content, min-content e fit-content(). È fondamentale per il layout e il design responsive.
Sintassi
Significato dei valori principali:
auto: Valore predefinito. L’elemento prende la larghezza automatica in base al contenuto e al contesto.
<lunghezza>: Una misura fissa come
px,em,rem,vw, ecc. (esempio:300px).<percentuale>: Percentuale della larghezza del contenitore padre (esempio:
50%).max-content: La larghezza massima necessaria per contenere tutto il contenuto su una sola linea senza andare a capo.
min-content: La larghezza minima che un elemento può avere senza che il contenuto venga troncato o spezzato.
fit-content(<valore>): Larghezza che si adatta al contenuto fino a un limite massimo specificato.
Esempio proprietà: width
Codice Esempio: width
.box {
height: 100px;
background-color: #50a14f;
color: white;
font-weight: bold;
display: inline-block;
margin-right: 20px;
padding: 10px;
text-align: center;
vertical-align: middle;
line-height: 80px;
border-radius: 8px;
}.fixed-width {
width: 150px;
}.percent-width {
width: 40%;
}.auto-width {
width: auto;
background-color: #f08a5d;
}.max-content {
width: max-content;
background-color: #4a90e2;
}.min-content {
width: min-content;
background-color: #f5a623;
}.fit-content {
width: fit-content(200px);
background-color: #9013fe;
}.container {
width: 600px;
border: 2px dashed #333;
padding: 15px;
}
Contenuto Esempio: width
Esempio di utilizzo di width
In questo esempio, vengono mostrate diverse larghezze impostate con la proprietà width:
CSS e HTML per l'esempio di width:
<style>
.box {
height: 100px;
background-color: #50a14f;
color: white;
font-weight: bold;
display: inline-block;
margin-right: 20px;
padding: 10px;
text-align: center;
vertical-align: middle;
line-height: 80px;
border-radius: 8px;
}
.fixed-width {
width: 150px;
}
.percent-width {
width: 40%;
}
.auto-width {
width: auto;
background-color: #f08a5d;
}
.max-content {
width: max-content;
background-color: #4a90e2;
}
.min-content {
width: min-content;
background-color: #f5a623;
}
.fit-content {
width: fit-content(200px);
background-color: #9013fe;
}
.container {
width: 600px;
border: 2px dashed #333;
padding: 15px;
}
</style>
<div class="container">
<div class="box fixed-width">Fixed (150px)</div>
<div class="box percent-width">Percent (40%)</div>
<div class="box auto-width">Auto</div>
<div class="box max-content">Max-content</div>
<div class="box min-content">Min-content</div>
<div class="box fit-content">Fit-content (200px)</div>
</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.118
