Come impostare la larghezza e l'altezza dell'arco di span in CSS

In HTML, Span è un contenitore in linea utilizzato per il contenuto della trama e lo styling. Ma non è possibile impostare la larghezza e l'altezza della campata come normalmente impostato per gli altri elementi HTML. In tale scenario, usa il "Schermo"Proprietà di CSS e quindi impostare la larghezza e l'altezza della campata in base alle tue esigenze.

In questo manuale, discuteremo di come regolare l'altezza e la larghezza di un arco in CSS.

Qual è la proprietà "display" in CSS?

IL "Schermo"La proprietà viene utilizzata per impostare il comportamento di visualizzazione dell'elemento HTML. Questa proprietà CSS può essere utilizzata per specificare se un elemento deve essere trattato come in linea o blocco o per impostare il layout dei suoi figli. Per essere più specifici, puoi utilizzarlo per regolare la larghezza e l'altezza della campata in CSS.

Sintassi

La sintassi della proprietà del display è:

Display: blocco | inline-block

Ecco la descrizione dei valori di cui sopra:

• bloccare: Viene utilizzato per impostare la larghezza e l'altezza dell'elemento.
• blocco inline: Viene utilizzato per impostare i margini e l'imbottitura dell'elemento.

Ora, passiamo agli esempi in cui imposteremo la larghezza e l'altezza della campata usando i valori del blocco e del blocco in linea della proprietà del display.

Esempio 1: Impostazione della larghezza e dell'altezza dell'archivio usando "blocco"

Per impostare la larghezza e l'altezza della campata, creare prima una campata in HTML usando il tag:

Html

Larghezza e altezza dell'arco

In CSS, impostare la larghezza e l'altezza della campata usando "Schermo" proprietà. Per farlo, usa il "arco"Per accedervi. Successivamente, imposta il valore della proprietà di visualizzazione come "bloccare"E la sua larghezza e altezza come"400px" E "150px". Inoltre, imposta il colore di sfondo della campata come "RGB (11, 235, 243)"E il confine della campata come"5px" larghezza, "solido"Forma e"RGB (47, 0, 255)" colore.

CSS

span
blocco di visualizzazione;
larghezza: 400px;
Altezza: 150px;
Background: RGB (11, 235, 243);
Bordo: 5px Solid RGB (47, 0, 255);

Come puoi vedere, abbiamo impostato con successo la larghezza e l'altezza della campata in CSS:

Passiamo all'esempio successivo

Esempio 2: Impostazione della larghezza e dell'altezza dell'arco

In questo esempio, useremo il "blocco inline"Valore della proprietà del display per regolare l'altezza e la larghezza della campata.

A tale scopo, creeremo un intervallo nell'HTML come l'esempio precedente, quindi passeremo al CSS e impostare il valore della proprietà di visualizzazione come "blocco inline"E impostare la larghezza e l'altezza della campata come"400px" E "150px". Inoltre, imposta il colore di sfondo della campata come "RGB (209, 173, 95)"E il confine della campata come"5px","solido", E "RGB (255, 166, 0)":

span
display: blocco inline;
larghezza: 400px;
Altezza: 150px;
Background: RGB (209, 173, 95);
Bordo: 5px Solid RGB (255, 166, 0);

Questo ci darà il seguente risultato:

Dall'esempi sopra indicati, si può osservare che usando il "bloccare" E "blocco inline"I valori della proprietà del display, le proprietà di altezza e larghezza di CSS possono essere regolate.

Conclusione

Utilizzando la proprietà del display "bloccare" E "blocco inline"Valori, l'altezza e la larghezza della campata possono essere regolate. Puoi usarne uno secondo la tua scelta; entrambi danno lo stesso risultato. In questo manuale, abbiamo spiegato la procedura relativa all'impostazione della larghezza e dell'altezza della campata utilizzando la proprietà del display CSS.