28172 sujets

CSS et mise en forme, CSS3

[Résolu] Espace entre blocs que je ne comprends pas

Bonjour,

Lorsque j'utilise le code suivant :
<html>
<head>
<style>
#boite {
	width:230px;
}
#boite .haut {
	background-color: #999;
	height:94px;
	margin: 0;
}

#boite .bords {
	background-color: #999;
	margin: 0;
}

#boite .bas {
	background-color: #999;
	height:16px;
	margin: 0;
}

</style>
</head>
<body>
		<div id="boite">
			<div class="haut"></div>
			<div class="bords">
				<p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla 
				blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla 
				blabla blabla blabla blabla blabla</p>
			</div>
			<div class="bas"></div>
		</div>	

</body>
</html>


Cela m'affiche mes 3 boites grises avec un espace entre chaque, dont je ne comprends pas la raison.

upload/23700-boites.png

Si j'applique un border-top, l'espace est remplacé par ma bordure, mais du coup, je ne peux pas les coller.

Quelqu'un peut m'expliquer ?

Merci

Frédéric
Modifié par fredoche (15 Sep 2009 - 14:25)
Salut,

C'est un problème maintes et maintes fois posé ici, je te conseille donc de faire une recherche. Pour t'aider dans celle-ci, utilise les mots-clefs "fusion" et "marges".

Au passage, utilise toujours un DOCTYPE complet et valide en première ligne de ton document.
Agylus a écrit :

C'est un problème maintes et maintes fois posé ici, je te conseille donc de faire une recherche. Pour t'aider dans celle-ci, utilise les mots-clefs "fusion" et "marges".

En fait, ne sachant pour quoi chercher, j'ai tapé des trucs comme "espace entre div", "espacement", etc., et donc je ne suis pas tombé sur les bons messages.


Agylus a écrit :

Au passage, utilise toujours un DOCTYPE complet et valide en première ligne de ton document.

Oui, j'en utilise. C'était juste pour ne pas alourdir le message avec trop de code.

Merci pour l'info, je vais étudier ça de près, même si j'avais déjà lu des trucs sur les fusions de marges et que je n'avais jamais rien compris.
Quelqu'un aurait un lien sur un tuto clair à ce sujet ?
Modifié par fredoche (08 Sep 2009 - 11:43)
Ok, j'ai trouvé le tuto qui va bien sur alsacréation Smiley smile

Sur le coup, je ne comprenais pas pourquoi j'avais un espace car j'utilisais des margin à "0", mais je n'avais pas percuté sur les paragraphes qui "surcharge" les marges hautes et basses de son parent.

Mon problème est donc résolu.

Merci

Frédéric
Sujet clos
Aller à