Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 31 di 49
  • livello principiante
Indice lezioni

Visualizzare un elemento inline come blocco e viceversa

Modificare i valori di default della proprietà display per adattare al meglio i nostri layout
Modificare i valori di default della proprietà display per adattare al meglio i nostri layout
Link copiato negli appunti

Di default i CSS assegnano la proprietà display:inline a quegli elementi come lo span, i link (a), etc., che possono essere contenuti all'interno di un paragrafo e che, quindi, devono essere mostrati in riga con gli altri elementi. Uno dei problemi di questa proprietà è che non interpreta le proprietà width ed height ma le assegna in base al contenuto dell'oggetto. Ad esempio, se abbiamo un link il cui contenuto occupa 100px in larghezza, anche impostando una larghezza maggiore, lo spazio occupato dall'elemento sarà sempre di 100 pixel. Questo problema può risultare scomodo soprattutto nei menu dove spesso l'area cliccabile è maggiore di quella effettivamente occupata dall'elemento.

Gli elementi di tipo blocco hanno la proprietà display con valore block. Sono, ad esempio, i paragrafi e tutti i tag di heading (h1, h2, h3, ...). Questi elementi, quando specificate, assumono le dimensioni impostate nel CSS e, salvo utilizzo della proprietà float, non accettano altri oggetti sulla stessa riga.

Succede molto spesso di avere la necessità di utilizzare un elemento inline come elemento di tipo blocco o viceversa. Per sopperire a questo problema è sufficiente modificare la proprietà display dell'oggetto impostandola sul valore desiderato.

Vediamo alcuni esempi per chiarire il concetto.

<div class="box">Lorem ipsum dolor sit amet</div>
<p>Lorem ipsum dolor sit amet</p>

Entrambi gli elementi nel codice precedente hanno la proprietà display impostata su block di default, questo significa che entrambi sono su una riga diversa e che lo spazio alla loro destra resterà inutilizzabile per gli altri elementi della pagina, come possiamo vedere in figura 1:

Figura 1 - Display:block
Display:block

Modificando il valore della proprietà display su inline, vedremo che il paragrafo si comporta come se avessimo impostato il valore float su left. Il paragrafo, infatti, si posiziona immediatamente dopo il div ed entrambi "liberando" lo spazio sulla destra.

div, p { display: inline; }

Figura 2 - Display:inline
Display:inline

Possiamo vedere le differenze nelle 2 demo: display block - display inline.

Ti consigliamo anche