18041 sujets

Questions générales et questions de débutants

[Résolu] Espace en bas de l'image dans un div

Bonjour,

Je n'arrive pas à enlever un espace blanc en bas d'un div, avec un lien sur une image que je place dans ce div.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="TITLE" CONTENT="erreur">
<META NAME="LANGUAGE" CONTENT="FR">
<title>SITE > Accueil</title>
<style type="text/css">
.conteneur {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    BACKGROUND-COLOR: #FFFFFF;
    vertical-align: middle;
}

.header {
    height: 100px;
    BACKGROUND-COLOR: #FFFFFF;
    background: #FFFFFF;
}

.logo {
    float: left;
    border: #FF0000 1px solid;
}
</style>
</head>
<body>
<div class="conteneur">
   <div class="header">
      <div class="logo">
         <a href="index.php"> <img src="carrevert.png" border="0px" /></a>
      </div>
  </div><!-- end .header -->

</div>
</body>
</html>

upload/32561-apercuerre.JPG

Merci pour vos idées.


edit 1
l'image carrevert.jpg fait 100*100
fin edit 1

edit 2 : si je mets border 1px, l'espace disparait.
si je mets border 0px, l'espace reste.
fin edit 2
Modifié par DanyBoon (15 Oct 2010 - 09:39)

img {
  vertical-align: middle;
}

ne fonctionne pas.

Ce que j'ai fait, dans mon cas, j'ai mis
margin-top: 2px;

pour "descendre" l'image à l'intérieur du div.
En fait, comme la couleur est la même entre le div du haut et le div du bas, ca fait se toucher.
L'espace apparait maintenant en haut, mais cela ne se remarque pas.

Merci
ca fonctionne parfaitement chez moi et chez beaucoup d'autres je pense car j'ai eu le même problème, la même réponse et cela à fonctionné parfaitement.
Peux tu tester ce code : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="TITLE" CONTENT="erreur">
<META NAME="LANGUAGE" CONTENT="FR">
<title>SITE > Accueil</title>
<style type="text/css">
.conteneur {

    width: 1000px;

    margin-left: auto;

    margin-right: auto; 

}



.header {

    height: 100px;
}



.logo {

    float: left;

    border: #FF0000 1px solid;
    BACKGROUND-COLOR: #00FF00;
    vertical-align: middle;
}


</style>
</head>
<body>
<div class="conteneur">
   <div class="header">
      <div class="logo">
        <a href="index.php"> <img src="carrevert.png" border="0px" /></a>
      </div>
  </div>

</div>
</body>
</html>


car chez moi ca ne fonctionne pas, (même résultat sur IE et Firefox)
et ca m'arrangerai quand même de ne pas bricoler un margin-top

merci
Chez moi non plus, ca ne fonctionne pas, mais rien d'anormal. le vertical-align: middle, il faut l'appliquer sur l'image !
Sujet clos
Aller à