28173 sujets

CSS et mise en forme, CSS3

[Résolu] Fusion des marges

Salut la foule ! Smiley smile

Ma découverte du jour : un conteneur qui prend un "overflow:hidden" modifie l'affichage de son contenu sous Firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />
		<title>Test overflow</title>
		<style type="text/css">
			#boite1,
			#boite2
			{
				background-color:#F00
			}
			#boite2
			{
				overflow:hidden
			}
			#boite3
			{
				background-color:#0F0
			}
			#boite3 h1
			{
				margin:0
			}
		</style>
	</head>
	<body>
		<div id="boite1"><h1>titre</h1></div>
		<div id="boite2"><h1>titre</h1></div>
		<div id="boite3"><h1>titre</h1></div>
	</body>
</html>


C'est normal ?
Ou un problème connu ? Corrigé de quelque manière (outre de spécifier les marges) ?

Merci pour vos lumières.
Modifié par 20cent (13 Nov 2006 - 11:28)
Modérateur
Salut 20cent, Smiley smile

A priori, je ne prends pas cela comme un bug mais plutôt comme un style par défaut... En effet, si on met :
div { margin: 0; }

... les trois div sont de tailles égales.

Donc pour moi, c'est juste un comportement qui dépend du moteur de rendu, au même titre que la mise en page par défaut des différents éléments peut différer d'un navigateur à l'autre...
koala64 a écrit :

si on met :
div { margin: 0; }

... les trois div sont de tailles égales.

Pas de mon côté. J'ai loupé quelque chose ? Smiley confus

koala64 a écrit :

je prends cela comme un style par défaut...

Tu sous-entends que par défaut sous Firefox, les élements "div" ont donc une marge ? Ce n'est pas le cas.

Et quand bien même, comment expliquer au final que l'ajout de l'"overflow:hidden" change la donne.
Modérateur
oups ! euh non ! Smiley langue

C'était plutôt :
* { margin: 0; }

qui met tout le monde à égal, ce qui m'a fait tirer cette conclusion...
Modérateur
bonsoir,

çela se situe au niveau des marges par defaut , en appliquant l'overflow, ton h1 , s'affiche sur l'espace totale qu'il se reserve , ou qui lui est donné , en bref la fusion des marges par defaut se fait alors a l'interieur plutot qu'a l'exterieur de l'element.

en activant le layout dans IE (avec zoom:1; par exemple) , le resultat est assez similaire , la balise se trouve aggrandie d'1em par le dessous en repoussant d'autant l'element suivant.

L'un et l'autre ne fusionent pas les marges de la même maniere .

Amusant encore ce truc , et tres visuel .

++
Modifié par gcyrillus (08 Nov 2006 - 01:37)
gcyrillus a écrit :

les marges ne fusionnent pas de la même manière

En effet. C'est bien ça. Smiley cligne
Est-ce un comportement normal maintenant ?
Je m'aperçois également que, toujours sous Firefox, mettre un flottant ou une bordure au "div" change l'affichage...

Très étonné de n'avoir par remarqué tout ça avant.
Encore plus de ne pas savoir d'où ça provient précisement.

Smiley sweatdrop
Sujet clos
Aller à