Forum libero

- Scritto da:
> Era dai tempi di Geocities che non facevo un
> sito.
>
> Ma quale è la differenza a livello pratico tra
> div e
> span?

DIV identifica un blocco. Immagina un rettangolo immaginario che "confina" il suo contenuto dal resto della pagina.

Esempio:
<div>ciao</div>Questa è una prova

----------------------------------
ciao
----------------------------------
Questa è una prova

in pratica attorno a "ciao" si "disegna" un box immaginario, entro il quale non ci può essere nulla. Tranne nel caso tu abbia specificato nel foglio di stile width e float:(left|right), in quel caso il blocco non è grande come tutta la larghezza della pagina e puoi ottenere cose tipo

<div class="box">ciao</div><div class="box">ciao2</div>

------------ ------------
|ciao      | |ciao2     |
------------ ------------

con

box {
   float: left;
   width: 10em;
}

In questo caso i "div" non occupano "spazio" sulla pagina, è come se ce li appiccicassi sopra, in un altro layer (con il float).

Ovviamente puoi impostare anche i bordi di modo che siano visibili con
border: 1px solid black;

I DIV quindi servono per creare layout, per identificare blocchi interi a cui dettare regole grafiche proprie.

Poi hai gli SPAN, che invece servono a dettare delle regole grafiche via CSS a spezzoni di testo che però non sono un blocco a sé stante.

Quindi:

Ciao <span class="test">io sono</span> Luca.
Lo puoi immaginare così


Ciao |io sono| Luca

dove a "io sono" puoi dare vari effetti grafici con il CSS.

È importante notare che nel caso la parola "io" vada a fine riga, la parola "sono" apparirà nella riga successiva, cioè il piccolo "box" si spezza, continuando nella riga successiva.

Ciao |io   || <-- margine
sono| Luca || <-- margine

Nel DIV il box non si spezza mai, se il testo contenuto va a fine riga, il box viene semplicemente ingrandito per contenere due righe.

Ciao <div>io sono</div> Luca

verrebbe così:

Ciao
----------------------------------
io sono
----------------------------------
Luca

Se raggiungessi il margine, così:

Ciao   || <-- qui "io" ci starebbe
-------||     ma il blocco non
io sono||     glie lo permette
-------||
Luca   ||

Con un margine più stretto

Ciao  ||
------||
io    ||
sono  ||
------||
Luca  ||

In altre parole il blocco DIV occupa sempre la pagina nella sua larghezza, non permette a nulla di stare alla sua destra o sinistra (fatto salvo il caso "float"). Può identificare quindi intere SEZIONI della pagina, blocchi logici di contenuto.
Lo SPAN invece serve per identificare parti di un testo a cui applicare certe regole CSS. Anche all'interno di paragrafi.

Attraverso il CSS (in particolare con il comando "display") volendo è possibile cambiare il comportamento di DIV e SPAN ma non ha senso farlo. Di default DIV ha "display: block;" e SPAN ha "display: inline;".


Probabilmente ci sono anche altre differenze, ma ora non mi vengono in mente e devo andare.