La proprietà CSS width definisce la larghezza dell'area del contenuto dell'elemento. Questa area è lo spazio tra il bordo, il padding e il margine di un elemento. Inoltre, la proprietà CSS width con il valore ' fit-content ” regolerà la larghezza dell'elemento in base al contenuto.
Questo studio spiegherà la proprietà CSS width con il valore fit-content.
Come utilizzare la proprietà di larghezza CSS con il valore fit-content?
Allo scopo di utilizzare la proprietà width CSS con valore fit-content, controlla la sintassi data:
larghezza: fit-contenuto
Esempio
In HTML, aggiungi tre elementi div con lo stesso nome di classe ' scatola ” e tre diverse classi “ colore-1 ”, “ colore-2 ', e ' colore-3 ”, rispettivamente. Aggiungi l'elemento
all'interno di ogni div per aggiungere contenuto alla pagina web:
< div classe = 'scatola colore-1' >
< p > Contenuto di adattamento alla larghezza CSS p >
div >
< div classe = 'scatola colore-2' >
< p > Ciao mondo ! p >
div >
< div classe = 'scatola colore-3' >
< p > Il lavoro di squadra inizia costruendo la fiducia. Siamo una squadra che lavora per una missione comune. p >
div >
Ecco l'output del codice HTML:
Finora abbiamo discusso della pagina HTML. Ora, nella sezione successiva, applicheremo diversi stili CSS agli elementi HTML per migliorarne l'aspetto. Nell'esempio in corso, verificheremo il comportamento del ' larghezza ” proprietà avente valore “ fit-content ” nel CSS.
Stile “scatola” div
.scatola {larghezza: fit-contenuto;
altezza: 50px;
colore: bianco fantasma;
imbottitura: 6px;
margine: 2px;
dimensione carattere: 18px;
}
Il ' .scatola ' si riferisce alla casella della classe div. Di seguito sono riportate le proprietà che vengono applicate ad esso:
-
- “ larghezza ” proprietà con il valore “ fit-content ” utilizza lo spazio disponibile, ma non supererà il contenuto.
- “ altezza ” è la proprietà che determina l'altezza dell'elemento.
- “ colore ” definisce il colore del carattere dell'elemento.
- “ imbottitura La proprietà ” produce spazio all'interno del bordo dell'elemento o attorno al contenuto.
- “ margine ” determina lo spazio intorno all'elemento.
- “ dimensione del font ” determina la dimensione del carattere.
Stile “colore-1” div
.colore- 1 {colore di sfondo: #00ABB3;
}
Il ' colore di sfondo ” proprietà è impostata su “ .colore-1 ” div.
Stile “colore-2” div
.colore- 2 {colore di sfondo: #083AA9;
}
Stile “colore-3” div
colore di sfondo: #4C6793;
}
Si può osservare che la larghezza dell'elemento è posta uguale al contenuto:
È fantastico! Abbiamo imparato con successo l'uso del CSS ' larghezza ” proprietà con il valore “ fit-content ”.
Conclusione
La proprietà CSS width ci permette di utilizzare diversi valori. Questi valori sono in percentuale, pixel o più. Per impostarlo in base al contenuto, il ' fit-content ” valore può essere impostato. Questo post ha descritto la proprietà CSS width con il valore fit-content con una dimostrazione pratica.