Contenuto di adattamento della larghezza CSS

La proprietà della larghezza CSS definisce la larghezza dell'area del contenuto dell'elemento. Quest'area è lo spazio tra il bordo di un elemento, l'imbottitura e il margine. Inoltre, la proprietà di larghezza CSS con il valore "contento"Regolerà la larghezza dell'elemento in base al contenuto.

Questo studio spiegherà la proprietà della larghezza CSS con il contenuto di valore del valore.

Come utilizzare la proprietà di larghezza CSS con valore adatto?

Ai fini dell'utilizzo della proprietà di larghezza CSS con valore adatto, controlla la sintassi data:

Larghezza: contento

Esempio

In HTML, aggiungi tre elementi Div con lo stesso nome di classe "scatola"E tre classi diverse"Colore-1","Color-2", E "Colore-3"Rispettivamente. Aggiungere

Elemento all'interno di ogni div per aggiungere contenuto alla pagina web:

Contenuto di adattamento della larghezza CSS

Ciao mondo!

Il lavoro di squadra inizia costruendo fiducia. Siamo una squadra che lavora per una missione comune.

Ecco l'output del codice HTML:

Finora abbiamo discusso della pagina HTML. Ora, nella prossima sezione, applicheremo diversi stili CSS agli elementi HTML per renderli migliori. Nell'esempio in corso, controlleremo il comportamento del "larghezza"Proprietà con il valore"contento"Nel CSS.

Stile "Box" Div

.scatola
Larghezza: contento fit;
Altezza: 50px;
Colore: Ghostwhite;
imbottitura: 6px;
Margine: 2px;
Font-size: 18px;

IL ".scatola"Si riferisce alla scatola della classe Div. Di seguito sono riportate le proprietà applicate ad esso:

• • "larghezza"Proprietà con il valore"contento"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 attorno all'elemento.
  • "dimensione del font"La proprietà determina la dimensione del carattere.

Stile "Color-1" Div

.Color-1
Background-color: #00abb3;

IL "colore di sfondoLa proprietà "è impostata su".Colore-1"Div.

Stile "Color-2" Div

.Color-2
Background-color: #083AA9;

Stile "Color-3" Div

.Color-3
Background-color: #4C6793;

Si può osservare che la larghezza dell'elemento è impostato uguale al contenuto:

È fantastico! Abbiamo imparato con successo l'uso del CSS "larghezza"Proprietà con il valore"contento".

Conclusione

La proprietà di larghezza CSS ci consente di utilizzare diversi valori. Questi valori sono in percentuale, pixel o più. Per impostarlo in base al contenuto, il "contento"Il valore può essere impostato. Questo post ha descritto la proprietà di larghezza CSS con il contenuto di valore del valore con una dimostrazione pratica.