BrunniLe 26/05/2010 à 18:47

Mais sinon le conseil de GC est le plus simple pour ceux qui veulent pas s'embêter: définir un padding dans #ext et ne laisser une marge QUE en-dessous des éléments internes (#int), jamais au-dessus. Malheureusement en définissant un padding dans #ext, on perd le "collapsing" des marges, du coup en donnant une margin-bottom aux éléments internes, celle-ci sera ajoutée sur le bas de #ext.

Exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
	<body> 
		<style type="text/css"> 
		div#ext {
			background-color: #ff8080; 
			width: 160px; 
			padding: 20px;
			/* display: inline-block; */
		}
		div.int {
			background-color: #80ff80; 
			margin-bottom: 20px;
		} 
		</style> 
		 
		<div id="ext"> 
			<div class="int">Texte 1</div>
			<div class="int">Texte 2</div>
		</div> 
	</body> 
</html>

Donnera ça, alors qu'on aurait aimé que la marge du bas de "Texte 2" ne soit pas prise en compte dans la hauteur de #ext, comme c'est le cas si #ext n'a pas de padding...

LZdG