Blocco in linea CSS
Questo blog ti guiderà sul display CSS inline e Block Elements. Quindi, iniziamo!
Quali sono i valori delle proprietà di visualizzazione CSS?
Di seguito sono elencati tre valori della proprietà di visualizzazione CSS:
- bloccare: Gli elementi del blocco iniziano su una nuova linea e riempiono l'intera larghezza, da sinistra a destra.
- in linea: Gli elementi in linea appaiono sulla stessa linea.
- blocco inline: Il valore della proprietà in linea è simile al valore in linea, ma fornisce anche margini e proprietà di imbottitura.
Elaboriamo ciascuno di essi attraverso un esempio uno per uno!
Esempio
Nel file HTML, aggiungi
elemento per fornire contenuti al browser Web.
Html
I migliori tutorial CSS
Proprietà di visualizzazione: blocco
IL "bloccare"Il display porta l'elemento sulla nuova riga e occupa l'intera larghezza della pagina. Se si desidera modificare le sue dimensioni, utilizzare le proprietà della larghezza e dell'altezza di CSS.
Ora, in CSS, applica il "Schermo"Valore della proprietà impostato come"bloccare"Al paragrafo aggiunto e assegnare il"confine" COME "5px Solid RGB (204, 13, 172)". Il bordo significherà il comportamento delle proprietà del display.
CSS
L'immagine sotto fornita indica il comportamento della proprietà del display a blocchi, come abbiamo descritto sopra:
Visualizza proprietà: in linea
IL "in linea"La proprietà non porta l'elemento alla riga successiva e nessuna delle proprietà di larghezza e altezza non influirà su questa proprietà.
In CSS, ora assegneremo il "Schermo"Valore della proprietà come"in linea".
CSS
Visualizza: in linea;L'immagine seguente indica che il testo è in linea:
Visualizza proprietà: blocco inline
Questo valore funziona allo stesso modo del valore di visualizzazione in linea. La differenza è che questa proprietà del display può essere modificata utilizzando le proprietà del margine e dell'imbottitura. Inoltre, puoi anche impostare i suoi valori di larghezza e altezza in base alle tue preferenze.
CSS
display: blocco inline;Di seguito è riportata l'immagine, che mostra l'elemento blocco inline senza alcuna larghezza e proprietà di altezza:
Per vedere la chiara differenza tra display in linea e blocco in linea. Vediamo attraverso un esempio pratico.
Esempio: differenza tra in linea e blocco in linea
Nella sezione del codice di seguito, abbiamo aggiunto un paragrafo utilizzando
etichetta. All'interno di questo elemento, ne abbiamo collocati due ""Con la classe"X"E classe"y".
Nota: è per impostazione predefinita un elemento in linea.
Html
Css- cascading = "x"> stile = "y"> foglio descrive come essere visualizzati gli elementi HTML sullo schermo.
Nella sezione CSS, assegneremo il valore della proprietà del display della classe X come "in linea"Mentre la classe Y con il valore"blocco inline". Si noti che tutte le altre proprietà di styling sono applicate ad entrambe le classi in modo simile.
CSS
Nell'immagine sotto fornita, puoi vedere la chiara differenza in entrambe le classi, la prima è in linea e la seconda viene visualizzata in un blocco inline:
Elenco di alcuni elementi HTML in linea, blocco e blocchi in linea
Molti degli elementi HTML sono per impostazione predefinita in linea, blocco o blocco in linea. Alcuni di essi sono elencati di seguito:
Elementi in linea HTML
- arco
- UN
- img
Elementi di blocco HTML
- P
- li
- div
- H1
- sezione
Elementi blocchi in linea HTML
- pulsante
- ingresso
- textrea
- Selezionare
Abbiamo discusso del comportamento degli elementi HTML in linea, blocco e in linea.
Conclusione
La proprietà del display CSS controlla il layout degli elementi. Questa proprietà CSS può essere utilizzata con tre valori, in linea, blocco e blocco in linea. Ogni valore rappresenta un comportamento diverso. Più specificamente, il valore della proprietà in linea è simile al valore inline, ma fornisce anche margini e imbottiti. In questo articolo, abbiamo spiegato la proprietà di CSS con esempi.