[CSS / HTML] Dubbio su concetto basilare.

[uomoserio]

Ciao a tutti, ho iniziato da poco l'apprendimento di HTML e CSS e ho un dubbio riguardo alcuni concetti di base, come l'interazione degli elementi e dei loro margini.

Ho costruito un layout di base formattando vari div, alcuni annidati, tramite CSS e fino a qui nessun problema. Per maggiore chirezza ho assegnato un colore di fondo ad ogni box div, così da poterlo riconoscere facilmente.
Ecco il codice del file html con il layout vuoto:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title> La mia prima pagina XHTML </title>
	<link href="miostile.css" rel="stylesheet" type="text/css" />
	<meta http-equiv="Content-Type" content="Text/HTML; charset=ISO-8859-1" />
</head>
<body>
	<div id="main">
		<div id="header"></div>
		<div id="container">
			<div id="content">
				
			</div>
			<div id="footer"></div>
		</div>
	</div>
</body>
</html>

e questo è il suo CSS:

body {
	margin: 0px;
	font-family: verdana, arial, sans-serif;
}

#main {
	margin: 0px auto 0px auto;
	width: 1000px; height: 600px;
	background-color: blue;
}

#header {
	background-color: yellow;
	width: 100%; height: 60px;
	text-align: center;
}

#container {
	width: 100%;
	height: 540px;
	background-color: green;
}

#content {
	width: 800px; height: 520px;
	background-color: beige;
}

#footer {
	background-color: darkred;
	width: 100%; height: 20px;
}

Quando però inserisco i testi (ad esempio il titolo nell'header o un paragrafo nel div dei contenuti) accade che i margini dei testi inseriti interagiscono con gli ingombri degli altri box div, anche se non sono quelli a cui appartengono.

Io avevo capito che gli elementi con margini interagiscono fra di loro solo entro i confini del box div a cui appartengono, cioè il "padre"....ma evidentemente mi sbaglio, perché accade esattamente l'opposto!

Non so se sono riuscito a spiegare bene il problema, per sicurezza ho allegato l'immagine del layout con i testi (dove ho descritto e si vede l'errore).

Vorrei che qualcuno riuscisse a chiarirmi bene il concetto: i margini degli elementi blocco come "Paragrafo" o "H1, H2, etc..." interagiscono con qualsiasi elemento adiacente nella pagina o soltanto all'interno del box div a cui appartengono?

Grazie per la pazienza...

[wingman87]

Spero di non dire castronerie ma da quanto ho letto e provato ho capito questo:
- innanzitutto per ricreare la situazione del tuo screenshot ho inserito un paragrafo nel content
- i paragrafi, di base, hanno un margine sopra e sotto
- i margini vengono considerati come esterni al block
- di conseguenza il div si adatta per contenere il p ma non il suo margine il quale spinge in giu il container
- un effetto diverso si ottiene agendo sulla proprietà overflow del div content (con overflow:auto ad esempio) il cui valore di default è visible cioè:
"The overflow is not clipped. It renders outside the element's box. This is default"
che è proprio quello che succede nel tuo caso.

Riferimenti:
http://www.w3schools.com/css/css_boxmodel.asp
http://stackoverflow.com/questions/2...padding-in-css
http://www.w3schools.com/cssref/pr_pos_overflow.asp