Distinguere i tag HTML Block e Inline
In questo articolo spiegherò il concetto di HTML Block e HTML Inline. Questa è una questione molto importante, perché coinvolge molte proprietà CSS.
Ti sei mai chiesto perché il contenuto di 2 tag p si trova in 2 righe diverse e in 2 tag span si trovano sulla stessa riga? Questo perché il browser determina come visualizzare i blocchi e inline. Le carte che mostrano lo stile del blocco si trovano su un blocco separato e le carte che mostrano in linea sono su una riga.
Mục lục
Che cos'è un tag di blocco HTML?
Il blocco HTML è la visualizzazione di un tag HTML sul browser che avrà la forma di un blocco, con una lunghezza del 100% e un'altezza a seconda del contenuto all'interno. Ciò significa che tutti i tag HTML sottostanti quando visualizzati nel browser saranno in una riga diversa.
Abbiamo alcuni tag HTML a blocchi come: div, p, header, footer, table, ul, li, section, article .. e molti altri.
Le caratteristiche comuni di queste carte sono:
- Ha una lunghezza predefinita del 100%
- È possibile impostare lo spazio tra il contenuto e il bordo.
- La larghezza può essere modificata utilizzando la proprietà width.
Esempio : due tag div verranno visualizzati su 2 righe diverse.
<div>Nội dung thẻ div thứ nhất</div> <div>Nội dung thẻ div thứ hai</div>Risultato :
Nội dung thẻ thứ nhất Nội dung thẻ thứ haiChe cos'è un tag HTML in linea?
HTML inline è un modo per visualizzare il contenuto all'interno di un tag HTML all'interno di un intervallo specificato. Cioè, la sua lunghezza dipenderà dalla dimensione dei dati. Pertanto, i tag inline verranno visualizzati uno dopo l'altro, non in una riga come un blocco.
Esistono molti tag HTML che visualizzano moduli inline come span, strong, i, b, a, br, big, button, textarea, label , …
Esempio : due tag span visualizzeranno dati consecutivi, non sono in 2 righe come nell'esempio 1.
<span>Nội dung thẻ span thứ nhất</span> <span>Nội dung thẻ span thứ hai</span>Quando utilizzare i tag HTML in linea e bloccati?
C'è un motivo per dividere i due formati in questo modo. Se vuoi creare un tag HTML che racchiude un blocco all'interno, dovresti usare un tag div o p, perché esegue il rendering di un blocco. Se desideri visualizzare i dati su una riga, utilizza i tag inline.
La domanda è: possiamo trasformare un tag di blocco in un tag inline? Molto semplice, basta usare la proprietà di visualizzazione CSS.
Esempio : imposta CSS display:inline per due tag div.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: white; display: inline } </style> </head> <body> <div>Nội dung thẻ div inline thứ nhất</div> <div>Nội dung thẻ div inline thứ hai</div> </body> </html>Risultato :
Nội dung thẻ div inline thứ nhất Nội dung thẻ div inline thứ nhấtAl contrario, se vuoi convertire da inline a block, usa la proprietà CSS:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> span{ background: white; display: block } </style> </head> <body> <span>Nội dung thẻ span block thứ nhất</span> <span>Nội dung thẻ span block thứ hai</span> </body> </html>Risultato : sebbene sia un tag span, visualizza comunque il blocco.
Nội dung thẻ span block thứ nhất Nội dung thẻ span block thứ haiQuindi ho finito il tutorial su come usare inline e block in HTML. Più tardi, quando lavori con CSS, lo incontrerai molto.
