Lezione 13 - Corso Intermedio Html

Elemento di Linea Span in Html


Elemento di Linea Span


L'elemento di linea span, proprio perché è un elemento di linea, non prevede l'invio a capo nè prima nè dopo di esso. Quindi lo span serve a contenere degli elementi in linea, ed essendo un elemento di linea non altera il flusso di una pagina.

C'è da dire che di defoult i Css assegnano la proprietà dispaly con display: inline; a quegli elementi come lo span, i link a, etc.(ma ne parleremo con maggiore dettagli più avanti nel corso)

Questo crea dei propblemi, in quanto la proprietà width (larghezza) ed height (altezza) sono ininfluenti, non vengono interpretate, non agiscono sui nostri tag, ma le misure vengono assegnate in base al contenuto dell'oggetto.

Per esempio, se abbiamo uno span il cui contenuto occupa 50px in larghezza anche impostando una larghezza maggiore lo spazio occupato dall'elemento sarà sempre di 50px

Vediamolo con il codice:
<html>                      
 <head>			    
  <title>Elemento di Linea - Span</title>
   <style>
	span {
		background:yellow;
		height:1200px;
		width:800px;
	}
 </style>
 </head>
 <body>			    
    <h1>Elemento di Linea - Span</h1>  
  <p>Testo per scrivere del testo.Testo per scrivere del testo.
Testo per scrivere del testo.Testo per scrivere del testo.
Testo per scrivere del testo.Testo per scrivere del testo.
Testo per scrivere del testo.<span>Testo per scrivere del testo.
Testo per scrivere del testo.Testo per scrivere del testo.
Testo per scrivere altro testo più lungo. Testo per scrivere altro 
testo più lungo. Testo per scrivere altro testo più lungo.</span>
Testo per scrivere altro testo più lungo. Testo per scrivere altro 
testo più lungo.Testo per scrivere altro testo più lungo.</p>
  <span>Altro testo semplice al di fuori di un paragrafo.</span>
 </body>                
</html>                    
Dal codice vediamo che abbiamo assegnato allo span il colore giallo con background:yellow; una altezza di 1200 pixel con height:1200px; e una larghezza di 800 pixel con width:800px;
Con il colore giallo è tutto a posto, ma con l'altezza e la larghezza notiamo che pur avendo assegnato delle misure molto grandi (notate soprattutto l'altezza, 1200 pixel prenderebbe l'intero schermo di un 15 pollici), l'elemento di linea span, occupa semplicemente lo spazio necessario a se stesso.