Margin di un div che cambia comportamento in base al border del contenitore

**Anth0ny92** · 13-05-2013, 18:25

Salve, questo problema mi è successo già altre volte in altre situazioni e non sono mai riuscito a capirne la causa quindi ora spero in un vostro aiuto per poterci vedere chiaro una volta per tutte.

In pratica se metto un margin-top ad un

che si trova in una parte alta del sito, se se questo p non si trova in un contenitore che ha un border il risultato che ottengo è quello di far abbassare tutto il body. In pratica non si abbassa solo il p, ma tutto quanto!

Ho parlato anche con alcuni amici, tutti hanno avuto questo problema almeno una volta, ma nessuno ne è venuto a capo.

Vi lascio di seguito il codice completo, cercando di spolparlo in modo da vedere solo quello che serve alla risoluzione del problema.

HTML

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta name="language" content="IT" />
		<link rel="stylesheet" type="text/css" href="wp-content/themes/nfc_theme/style.css" media="screen"/>        
        
	  <title><?php bloginfo('name'); ?></title>
	</head>
	
	<body>
		<div id="nonno"> 
			
			<div id="padre"> 
			
				<div id="head" class="container"> 
					<p id="title"><?php bloginfo('name'); ?></p>
					<p id="subtitle"><?php bloginfo('description'); ?></p>
				</div> 
					
				<div id="corpo" class="container"> 
				</div> 
			
			</div> 
	           
			<div id="footer" class="container"> 
	
			</div> 
				
		</div> 
	</body>
	
</html>

CSS

codice:

/*BEGIN CSS*/
body, html {
	position:relative;
    height: 100%;
}
body {
	background-color:#EEF;
	font-family:Arial, Verdana, sans-serif;
}

#nonno {
	position:relative;
	height: auto;
	width:1000px;
	min-height: 100%;
	margin:0 auto !important;
	background-color:#FFF;
	box-shadow:0 0 5px #777;
}

.container {padding:0 10px;}

#padre {
	position:relative;
	width:100%;
	min-height:200px;
	padding-bottom:150px;
	/*border:1px dotted green;/**/
}

#head {
	position:relative;
	height:150px;
	color:#FFF;
	/*border:1px dotted green;/**/
}

p#title {margin:15px 0 5px; font-size:36px; font-weight:bold;}
p#subtitle {font-size:20px;}

#footer {
	position:absolute;
	width:100%;
	height:150px; /*Se viene cambiato bisogna cambiare anche il padding-bottom di "padre"*/
	padding:10px 0;
	bottom:0;
	/*border:1px solid black;/**/
}

Il paragrafo colpevole è #title, che, se tolto il border al div head mi fa abbassare tutto il body.

Spero di non essere stato troppo caotico nell'esposizione. Spero in un vostro aiuto e vi ringrazio anticipatamente.

**ldetomi** · 14-05-2013, 10:40

Prima di tutto un consiglio pratico per facilitare la vita a chi deve aiutarti: posta semplice codice ridotto all'osso, nulla che non sia strettamente legato la problema, ovvero... genera una pagina html che abbia solo lo stretto indispensabile a replicare il problema, e il corrispondente codice css (in pratica nel tuo caso, footer, larghezze del body, font, ecc. ecc. sono inutili, ma allungano il post e complicano la vita per la necessità di spulciare tutto quanto).

Detto questo, non ho provato ma a naso mi puzza del famoso problema del collassamento tra padding e margin... in pratica che su hai 2 oggetti, uno dopo l'altro, in cui il padding di uno dovrebbe sommarsi al margin dell'altro, in assenza di una qualsiasi cosa (nel tuo caso il border) che separi le 2 proprietà tra loro, i browser collassano lo spazio alla dimensione massima tra quella del padding e quella del margin... non fa la somma delle 2 come si aspetterebbe. In questi casi il border è utile proprio per questo, per spezzare la continuità tra margin e padding...

**Anth0ny92** · 14-05-2013, 18:02

Hai ragione, chiedo scusa, non mi sono impegnato abbastanza nel taglio del codice, adesso lo riposto dato che è lungo praticamente la metà. Io non credo sia il problema che hai detto tu dato che non vedo nessun padding, ma solo margin, ma se pur fosse quello, non ci sarebbe un modo per risolverlo senza inserire un bordo obbligatorio?

HTML

codice:

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>        
	</head>
	
	<body>
		<div id="nonno"> 
			
			<div id="padre"> 
			
				<div id="head" class="container"> 
					<p id="title">Title</p>
					<p id="subtitle">Subtitle</p>
				</div> 
	
			</div> 
				
		</div> 
	</body>
	
</html>

CSS

codice:

body, html {
	position:relative;
    height: 100%;
}
#nonno {
	position:relative;
	margin:0 auto !important;

}

.container {padding:0 10px;}

#padre {
	position:relative;
	width:100%;
}

#head {
	position:relative;
	background: rgb(195,217,255); /* Old browsers */
}

p#title {margin:30px 0 5px; font-size:36px; font-weight:bold;}
p#subtitle {font-size:20px;}

Discussione: Margin di un div che cambia comportamento in base al border del contenitore

Strumenti discussione

Ricerca discussione

Visualizza

Margin di un div che cambia comportamento in base al border del contenitore

Permessi di invio