...si quelqu un à une idée elle sera la bienvenue. de mon coté je suis entraint de chercher.
Pourquoi ne pas lire les réponses faites ?
![Citation](https://forum.developpez.be/images/misc/quote_icon.png)
Envoyé par
NoSmoking
...je dirais que tu rencontres un problème de fusion de marge...
et au vu de ta réponse on est bien en présence de celles ci.
Petit rappel sur la fusion des marges
La fusion de marges s'applique à des éléments de type block qui sont dans le flux, donc qui ne sont pas en position absolue/fixed ou flottants, elles concernent les marges extérieures haute et basse, margin-top et margin-bottom.
Elles s'appliquent à des éléments qui sont PARENT/ENFANT ou FRERES (ex: H1 et P).
Prenons le cas de figure suivant
1 2 3 4 5 6
| <PRECEDANT>
</PRECEDANT>
<PARENT>
<ENFANT>
</ENFANT>
</PARENT> |
Question :
à quelle distance se placera l'élément PARENT de l'élément PRECEDANT ?
Réponse :
La distance sera égale à la plus grande valeur (absolue) entre la marge haute du PARENT et celle de l'ENFANT, c’est là qu'il faut se méfier des marges par défaut des navigateurs.
Cette réponse ne vaut que dans le cas où les marges sont toutes les deux positives ou négatives.
Solutions :
Il existe plusieurs solutions pour s'en affranchir et notamment
1. Connaissant le principe des fusions de marges il suffit de fixer aux éléments les marges que l'on souhaite voir appliquer.
1 2 3
| PARENT, ENFANT {
margin-top:0.5em;
} |
2. Mettre une marge interne,
padding-top, au parent
1 2 3
| PARENT {
padding-top: 0.01em; /* attention peut influer sur les dimensions de la boite */
} |
3. Mettre une bordure,
border-top, au parent
1 2 3
| PARENT {
border-top: 1px solid transparent; /* attention peut influer sur les dimensions de la boite */
} |
Exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fusion des marges</title>
<style>
div {
width:20em;
height:10em;
}
#div_1{
background:#567;
}
#div_2{
background:#789;
}
#div_3{
background:#9AB;
}
#div_3 h1{
margin-top:0;
}
#div_4{
background:#BCD;
border-top:1px solid transparent;
}
#div_5{
background:#DEF;
padding:0.01em;
}
</style>
</head>
<body>
<div id="div_1">Bloc référence...
</div>
<div id="div_2">
<h1>Titre</h1>
<p>Positionnement avec fusion des marges</p>
</div>
<div id="div_3">
<h1>Titre</h1>
<p>H1 avec margin-top:0</p>
</div>
<div id="div_4">
<h1>Titre</h1>
<p>Parent avec border-top:1px solid transparent;</p>
</div>
<div id="div_5">
<h1>Titre</h1>
<p>Parent avec padding:0.01em;</p>
</div>
</body>
</html> |
A lire :
Partager