Visualizzare un elemento inline come blocco e viceversa

8 febbraio 2011

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 blockdisplay inline.

Tutte le lezioni

1 ... 30 31 32 ... 49

Se vuoi aggiornamenti su Visualizzare un elemento inline come blocco e viceversa inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Visualizzare un elemento inline come blocco e viceversa

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy