Blocco HTML ed elementi in linea
Ogni elemento HTML ha un valore di visualizzazione predefinito, a seconda del tipo di elemento che è.
Sono disponibili due valori di visualizzazione: block e inline.
Elementi a livello di blocco
Un elemento a livello di blocco inizia sempre su una nuova riga.
Un elemento a livello di blocco occupa sempre l'intera larghezza disponibile (si estende a sinistra ea destra il più possibile).
Un elemento a livello di blocco ha un margine superiore e uno inferiore, mentre un elemento inline no.
Esempio
<div>Hello World</div>
Ecco gli elementi a livello di blocco in HTML:
Elementi in linea
Un elemento inline non inizia su una nuova riga.
Un elemento in linea occupa solo la larghezza necessaria.
Questo è un elemento <span> all'interno di un paragrafo.
Esempio
<span>Hello World</span>
Ecco gli elementi inline in HTML:
Nota: un elemento inline non può contenere un elemento a livello di blocco!
L'elemento <div>
L' <div>elemento viene spesso utilizzato come contenitore per altri elementi HTML.
L' <div>elemento non ha attributi obbligatori, ma style, classe idsono comuni.
Se utilizzato insieme a CSS, l' <div>elemento può essere utilizzato per definire lo stile dei blocchi di contenuto:
Esempio
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
L'elemento <span>
L' <span>elemento è un contenitore inline utilizzato per contrassegnare una parte di un testo o una parte di un documento.
L' <span>elemento non ha attributi obbligatori, ma style, classe idsono comuni.
Se utilizzato insieme a CSS, l' <span>elemento può essere utilizzato per definire lo stile di parti del testo:
Esempio
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
Riassunto capitolo
- Sono disponibili due valori di visualizzazione: block e inline
- Un elemento a livello di blocco inizia sempre su una nuova riga e occupa l'intera larghezza disponibile
- Un elemento inline non inizia su una nuova riga e occupa solo la larghezza necessaria
- L'
<div>elemento è a livello di blocco e viene spesso utilizzato come contenitore per altri elementi HTML - L'
<span>elemento è un contenitore inline utilizzato per contrassegnare una parte di un testo o una parte di un documento
Tag HTML
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .