HTML Tutorial

Html: dimensione degli elementi


Larghezza di un elemento


Grazie alla proprietà width (larghezza), è possibile specificare in pixel o in percentuale la larghezza che un elemento dovrà occupare all’interno della finestra del browser.

La sintassi è molto semplice:

<div style=‘width:200px’>…Contenuto…</div>

Questa proprietà è molto utile quando si desidera realizzare menu, finestre o elementi che richiedano dimensioni ben precise.

Vediamo un esempio di codice html:

<div style="width: 200px; background-color:yellow;"> Questo div è largo 200px</div>
<br>
<div style="width: 300px; background-color:yellow;">Questo div è largo 300px</div>
<br>
<div style="width: 400px; background-color:yellow;">Questo div è largo 400px</div>

In questo esempio abbiamo definito 3 div in sequenza, ognuno con un semplice testo all’interno; abbiamo assegnato larghezze diverse e un colore di sfondo. Da notare che l’altezza del div, in questo esempio, è dipeso dal contenuto; un div con più righe di testo risulterà più alto di un div con una sola riga.

Vediamo il risultato:

Questo div è largo 200px


Questo div è largo 300px

Questo div è largo 400px


In alternativa avremmo potuto utilizzare un valore percentuale per la proprietà width.

In questo caso è essenziale conoscere le dimensioni dell’elemento che conterrà l’elemento al quale applicare una dimensione in percentuale.

Difatti con il seguente codice:

<div style=‘width:50%’>…Contenuto…</div>

definiamo un div che occuperà il 50% in larghezza rispetto all’elemento che lo contiene. Riprendendo il codice html precedente, apportiamo alcune modifiche:

<div style="width: 20%; background-color:yellow;">Questo div è largo il 20%</div>
<br>
<div style="width: 30%; background-color:yellow;">Questo div è largo il 30%</div>
<br>
<div style="width: 50%; background-color:yellow;">Questo div è largo il 50%</div>

Il risultato dsarà il seguente:

Questo div è largo il 20%


Questo div è largo il 30%

Questo div è largo il 50%

I tre div definiti si adatteranno alle dimensioni del body e quindi della finestra del browser. In altre parole se rimpiccioliamo la finestra, anche i div assumeranno dimensioni diverse rispettando le percentuali assegnategli.


Altezza di un elemento


Grazie alla proprietà height possiamo definire l’altezza massima che un elemento deve assumere.

La sintassi è del tutto simile alla proprietà width:

<div style=‘height:200px’>…Contenuto…</div>

Combinando insieme width e height è possibile realizzare dei box e della finestre a larghezza fissa. Vediamo con un esempio, il codice:

<div style="width: 100px; height: 100px; background-color: red;">DIV</div>
<br>
<div style="width: 150px; height: 150px; background-color: red;">DIV</div>
<br>
<div style="width: 200px; height: 200px; background-color: red;">DIV</div>

I tre box definiti hanno larghezza e altezza fissa e un colore di sfondo per essere evidenziati. Di seguito il risultato nella finestra del browser:

DIV


DIV

DIV

Così come per la proprietà width, anche height permette di utilizzare un valore espresso in percentuale. Inoltre è possibile utilizzare simultaneamente percentuali e pixel, ad esempio definendo un’altezza in pixel e una larghezza in percentuale o viceversa.

Questo modo di operare è utile quando si vuol realizzare una pagina web che si estenda esclusivamente in larghezza o altezza.

Vediamo il seguente codice html:

<div style="width: 100px; height: 100%; background-color: red;">DIV</div>

Produce il seguente risultato:

DIV