Enlever white space entre les div

Fermé
Mithrandir - Modifié par Mithrandir le 24/10/2013 à 20:53
 Mithrandir - 25 oct. 2013 à 14:29
Bonjour,

J'ai un problème d'un espace entre 2 div qui se suivent verticalement et ma mise en page est au pixel près:

<div>
<img src='images/bandowebcrea.png' alt='bandeau nuages etoiles'/>
</div>
<!-- ici un espace blanc de 4px sous Chrome)-->
<div class='ligne'>

</div>


Pour l'instant j'ai mit cela pour enlever l'écart gênant :

div.ligne{
height:1em;
background-color:#292929;
/* mouais bof */
position:relative;
top:-4px;
}
mais c'est pas un solution qui me ravit et l'écart en pixels peut varier suivant les navigateurs. Mon design n'autorise pas un décalage ne serait ce que 1px.

Une suggestion pour ça?
Merci

A voir également:

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
25 oct. 2013 à 14:04
Bonjour

cela peut venir d'un margin automatique d'image

essaie
img {margin:0;}

cela peu aussi venir de la hauteur de ligne qui varie selon le nav si tu mets du texte dans ligne

donc
.ligne p (ou autre h) {
line-height:1em;
font-size:1em;
}

0
Merci de votre réponse,

ce n'est pas ça il y a margin et padding 0 dans le css du body
Je vient de trouver un article sur mon problème mais concernant inline-block:
http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

Du coup j'ai rajouté à l'image display:block; plus d'espace blanc mais plus de text-align:center; ...

Je remets mon code entier, yen a pas long et je sait plus comment centrer sans rajouter d'autres éléments ...


<body>
<div>
<img src='images/bandowebcrea.png' alt='bandeau nuages etoiles' style='' class='imgbando' />
</div>
<div class='ligne'>

et le css:

body{
margin:0;
padding:0;
background-color:#ffffff;
color:#000000;
text-align:center;
font-family:arial;
}
div{
text-align:center;
}

div.ligne{
height:1em;
background-color:#292929;

}
.container{
width:100%;
height:72%;

}
.imgbando{

/*display:block; la ca marche mais plus centré */
}


Si vous avez une réponse ça m'intéresse sinon je vais rajouter des éléments pour centrer l'image.
0