Block vs. Inline
Questo è dovuto ai diversi display comportamenti: Block o inline. Vediamo la differenza con un breve esempio. Senza alcun CSS, creo un template HTML con i tag <p> e <span>:
<body>
<p>I'm a paragraph</p>
<p>I'm a paragraph too</p>
<span>I'm a word</span>
<span>I'm a word too.</span>
</body>
Puoi vedere la differenza? Ogni tag <p> inizia con una nuova linea anche se c’è abbastanza spazio. Span sono invece visualizzati fianco a fianco.
Ogni elemento HTML ha un valore di visualizzazione predefinito. – W3
Di default, gli elementi HTML hanno un comportamento di visualizzazione come blocco o in linea. Gli elementi che iniziano ciascuno con una nuova linea (i tag <p> in questo esempio) sono chiamati elementi a livello blocco, e gli altri (<span>) che possono essere affiancati sono elementi in linea.
Ci sono alcune caratteristiche diverse tra gli elementi a blocchi e quelli in linea:
Elementi a livello di blocco
- Prendono full-larghezza (100% di larghezza) per impostazione predefinita
- Ogni elemento viene visualizzato in una nuova riga
- Larghezza & altezza può essere impostata
- Può contenere altri elementi a blocco o in linea
Siccome i tag <p> sono elementi a livello blocco, le proprietà di larghezza & altezza possono essere impostate:
p {
height: 100px;
width: 100px;
background: red;
color: white;
}
Se non fosse dichiarata alcuna larghezza qui, allora la larghezza predefinita di <p> sarebbe 100%. Tuttavia, ho dichiarato una larghezza di 100px e il prossimo elemento <p> inizia ancora con una nuova linea:
Elementi in linea
- Prendono solo lo spazio necessario
- Visualizzati fianco a fianco
- Non accettano proprietà di larghezza o altezza, e il margine superiore e inferiore
- Può essere un genitore di altri elementi in linea
Possiamo cambiare il comportamento di visualizzazione degli elementi. Quindi cambiamo il comportamento di visualizzazione del tag <p> in inline:
p {
height: 100px;
width: 100px;
background: red;
color: white;
display: inline;
}
Siccome il nostro tag <p> è ora un elemento in linea, essi saranno affiancati e le proprietà di larghezza & altezza non hanno più effetto:
Vedi una lista completa di tag HTML come blocco & elementi in linea.