Proprietà CSS width
La proprietà CSS width imposta la larghezza di un elemento. Prova esempi con ciascun valore disponibile.
La proprietà CSS width imposta la larghezza dell'area di contenuto di un elemento — il riquadro interno che contiene testo ed elementi figli. Per impostazione predefinita questa larghezza non include il bordo, il padding o il margine: questi vengono aggiunti esternamente, quindi la larghezza totale resa dell'elemento è width + padding + border.
Questa pagina spiega cosa misura width, tutti i valori che accetta (incluse le moderne parole chiave intrinseche min-content, max-content e fit-content), come vengono risolte le percentuali e l'insidia del box model che mette in difficoltà la maggior parte dei principianti.
Come width interagisce con il box model
Il modo in cui width viene misurata dipende dalla proprietà box-sizing:
content-box(il valore predefinito) —widthdimensiona solo il contenuto. Padding e bordo vengono aggiunti all'esterno. Un riquadro conwidth: 200px; padding: 20px; border: 5px solidviene reso largo 250px.border-box—widthdimensiona il contenuto, il padding e il bordo insieme. Le stesse dichiarazioni producono un elemento largo esattamente 200px, e l'area di contenuto si riduce per fare spazio.
Poiché border-box rende prevedibili le dimensioni degli elementi, molti fogli di stile lo impostano globalmente:
*,
*::before,
*::after {
box-sizing: border-box;
}A quali elementi si applica width
La proprietà width si applica a tutti gli elementi eccetto gli elementi inline non sostituiti (come un semplice <span>), le righe di tabella e i gruppi di righe (ovvero <thead>, <tfoot> e <tbody>). Per assegnare una larghezza a un elemento inline, impostare prima display: inline-block o display: block.
La proprietà accetta una lunghezza CSS (px, pt, em e così via), una percentuale o una parola chiave come auto o max-content.
Una percentuale viene risolta rispetto alla larghezza dell'elemento padre (il blocco contenitore). Per gli elementi posizionati in modo assoluto, la percentuale viene calcolata rispetto alla larghezza del padding box del blocco contenitore.
La proprietà width può essere sovrascritta da min-width e max-width: un max-width inferiore a width ha la precedenza, così come un min-width superiore a width. La proprietà complementare è height.
I valori di lunghezza negativi non sono consentiti.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi eccetto gli elementi inline non sostituiti, le righe di tabella e i gruppi di righe. |
| Ereditato | No. |
| Animabile | Sì. La larghezza di un elemento è animabile. |
| Versione | CSS1 |
| Sintassi DOM | Object.style.width = "300px"; |
Sintassi
Sintassi della proprietà CSS width
width: auto | length | percentage | initial | inherit | fit-content | min-content | max-content | stretch;Esempio della proprietà width specificata in "%":
Esempio della proprietà CSS width con il valore %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Risultato
Nell'esempio, la larghezza del contenitore div è del 50% — la metà della larghezza del suo elemento padre (in questo caso, <body>).
Nell'esempio seguente, la larghezza del primo elemento è 250px e quella del secondo è 25em:
Esempio della proprietà width specificata in "px" e "em":
Esempio della proprietà CSS width con i valori px e em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.t1 {
width: 250px;
border: 1px solid black;
background-color: #1c87c9;
}
div.t2 {
width: 25em;
border: 1px solid black;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Width property example</h2>
<h3>width: 250px</h3>
<div class="t1">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>width: 25em</h3>
<div class="t2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Parole chiave per il dimensionamento intrinseco
Oltre alle lunghezze fisse e alle percentuali, width accetta parole chiave che dimensionano un elemento in base al suo contenuto anziché al suo contenitore:
max-content— la larghezza che il contenuto vorrebbe se non andasse mai a capo. Per un paragrafo, corrisponde all'intero testo su una sola riga.min-content— la larghezza minima senza overflow, ovvero la larghezza della parola non spezzabile più lunga.fit-content— cresce con il contenuto comemax-contentma non supera mai lo spazio disponibile, quindi va a capo quando raggiunge il bordo del contenitore. Ideale per riquadri "shrink-to-fit" come pulsanti o badge.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px solid #1c87c9;
margin-bottom: 10px;
padding: 5px;
}
.min { width: min-content; }
.max { width: max-content; }
.fit { width: fit-content; }
</style>
</head>
<body>
<div class="min">width: min-content</div>
<div class="max">width: max-content</div>
<div class="fit">width: fit-content</div>
</body>
</html>Il riquadro min-content è largo quanto la parola più lunga, il riquadro max-content si estende per adattarsi all'intera riga, e il riquadro fit-content si colloca tra i due in base allo spazio disponibile.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| auto | Il browser calcola una larghezza per l'elemento specificato. Questo è il valore predefinito. | Prova » |
| length | Definisce la larghezza in px, pt, cm, ecc. | Prova » |
| percentage | Definisce la larghezza come percentuale dell'elemento contenitore. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. | |
| fit-content | Calcola la larghezza in base alla dimensione intrinseca del contenuto. | Prova » |
| min-content | Calcola la larghezza in base alla dimensione minima del contenuto. | Prova » |
| max-content | Calcola la larghezza in base alla dimensione massima del contenuto. | Prova » |
| stretch | Estende l'elemento per riempire il contenitore. | Prova » |
Errori comuni
- Una larghezza percentuale senza larghezza definita per il padre. Se la larghezza del padre è
auto, una percentuale potrebbe non risolversi come previsto. Assegna al blocco contenitore una larghezza esplicita (oppure affidati alla larghezza naturale a tutto schermo di un elemento block). - Padding e bordo fanno traboccare il layout. Con il valore predefinito
content-box, aggiungere padding a un elemento largo il 100% lo fa fuoriuscire dal padre. Passa abox-sizing: border-boxper mantenere il totale al 100%. widthsugli elementi inline viene ignorata. Imposta primadisplay: inline-blockoblock.- Responsività. Preferisci
max-widtha unawidthfissa per layout fluidi:max-width: 600pxpermette al riquadro di ridursi su schermi piccoli mantenendo un limite su quelli grandi.