Lezione 11 - Corso Intermedio Html

Lo Spazio occupato dagli Elementi in Html


Lo Spazio occupato dagli Elementi

Gli elementi della pagina possono essere classificati in base allo spazio che occupano. Tra questi elementi abbiamo gli Elementi di Blocco e gli Elemnti di Linea.

Un elemento di blocco

è un elemento che ha bisogno di uno spazio tutto suo all'interno del flusso della pagina, ad esempio i Paragrafi - p - o le Intestazioni - h -.

Gli elementi di linea

sono degli elementi che vengono inseriti all'iterno del codice e non stravolgono il flusso della pagina in quanto non hanno bisogno di uno spazio particolare se non lo spazio utile per rappresentare se stessi.
Ad esempio i Collegamenti o le Immagini sono elementi di linea.

IMPORTANTE:
- Teniamo presente che sulla stessa riga non possono esistere due elementi tutti e due di blocco. Quindi su una riga ci può essere solo un elemento di blocco perché esso si prende tutto lo spazio, dall'inizio, alla fine della riga.
- Perciò, un elemento di blocco prende lo spazio di tutta la riga e nel suo interno si possono aggiungere degli elementi di linea che prendono semplicemente lo spazio per rappresentare se stessi.
<html>                      
 <head>			    
   <title>Lo Spazio Occupato dagli Elementi</title>
   <style>
	  h2 {background:red;}
	  p {background:cyan;}
	  a {background: yellow;}
	  img {background: yellow;}
   </style>
 </head>
 <body>			    
    <h1>Lo Spazio Occupato dagli Elementi</h1>  
    <h2>Elementi di Blocco e di Linea</h2> 
    <p>Paragrafo UNO</p> 
    <p>Paragrafo DUE</p> 
    <p>Paragrafo TRE</p> 
    <p>Paragrafo con un <a href="#">collegamento</a>  al suo interno</p> 
    <p>Paragrafo con una immagine <img src="percorso dell'immagine" width="400px"/> al suo interno</p> 
 </body>                
</html>                    

Notiamo come gli elementi di blocco occupano tutto lo spazio a loro disposizione. Occupano l'intera riga dell'intera larghezza della pagina.
Mentre gli elementi di linea occupano lo spazio utile per rappresentare se stessi.

Nell'esempio che abbiamo visto al collegamento abbiamo assegnato il colore giallo, e lo notiamo subito perché si vede in maniera evidente.
Mentre il colore di sfondo, sempre il giallo, che abbiamo assegnato all'immagine può non vedersi perché lo spazio occupato dal colore di sfondo è coperto completamente, perché riempito completamente dall'immagine stessa. Se l'immagine che inseriamo è un'immagine png il colore di sfondo si vedrebbe al di là dei contorni dell'immagine.