div non combaciano

[webhome]

Ragazzi mi sapete spiegare xkè questi 3 div n0n combaciano???
Poi se nel div cenrtale gli metto un border combaciano...

------------
<div style="background-color:#F00; width:401px; height:25px; margin-left:auto; margin-right:auto;"></div>
<div style="background-color:#F00; width:401px; margin-left:auto; margin-right:auto;">


</p>


</p>
</div>
<div style="background-color:#F00; width:401px; height:25px; margin-left:auto; margin-right:auto;"></div>
------------

Grazie

[webhome]

nessuno mi aiuta?

[ResianTaxidrive]

cosa intendi per "non combaciano"?

[sandrone65]

Il div centrale, a differenza degli altri due che sono di 25px, non ha l'altezza impostata. Se fosse vuoto quindi sarebbe invisibile. Ma non è vuoto perchè contiene due paragrafi a loro volta vuoti. Gli elementi

hanno però un margine predefinito, a meno che tu non definisca la regola CSS:

p{margin:0;}

Questo è il motivo per cui i tuoi div non combaciano, è il margine dei paragrafi che li tiene separati.
Impostando il bordo al contenitore i margini vengono contenuti all'interno del div che quindi "appare" e si colora di rosso.
Nota che i paragrafi danno origine anche al margin-collapsing verticale, cioè i margini verticali non si sommano ma collassano, per cui il margine totale sarà uguale al maggiore dei margini. Per questa ragione puoi aggiungere tutti i paragrafi vuoti che vuoi al div centrale e il risultato apparente non cambierà

[webhome]

grazie 'sandrone65'..

Alla fine avevo capito che fosse colpa dei paragrafi.
A questo punto gli ho inserito un border trasparent e senza altezza in modo da far adattare il div al contenuto.. la vedi buona come soluzione?

[sandrone65]

Beh io fossi in te opterei per un bel foglio CSS di reset, che ti risolve a monte molti problemi di questo tipo. Con il foglio di reset ad esempio questo problema non ti si sarebbe nemmeno presentato, dato che i paragrafi vengono impostati con margin e padding uguali a zero