Padding par défaut?

Version imprimable

06/09/2006, 21h47
Anduriel

Padding par défaut?

Salut,
J'ai un div auquel je mets un padding:0.
Comme premier contenu de ce div, j'insere une image. Dans ses attributs j'ai mis margin et padding aussi à 0. Le problème c'est qu'il existe toujours un déclage de 2px entre mon image et le haut de mon div:

http://ctoonline.free.fr/images/bug.jpg

ici c'est la zone rose qui est le padding par défaut.
Comment régler ce problème et faire coller l'image au bord?
Merci
06/09/2006, 22h03
Linaa

Tu peux poster le code HTML/CSS correspondant?
06/09/2006, 22h07
MasterOfChakhaL

Ce n'est pas une solution à ton problème (j'attends de voir le code) mais avec le morceau d'image que tu nous montre, j'ai l'impression que tu aurais tout interêt à la mettre en image de fond (qui est facilement positionnable)
06/09/2006, 22h42
Taum

Petit truc pour virer toutes les marges/padding/border par défaut :
* { border: 0; padding: 0; margin: 0; }

Essaye de rajouter cette regle dans ton CSS et tu sauras si c'est effectivement dû à un padding par défaut ou pas ;)

Salut,
Pour l'image en fond, j'aimerai éviter, sauf si c'est vraiment nécessaire.
Sinon les margin, padding, border 0 ne changent rien.

Voila le code HTML:

Code:

1
2
3
4
5
6
7
8
9
10
<div class="blockcentre">
   <img src="images/top.gif" alt="" />
   <div class="lien"><img src="images/accueil.gif" alt="Informations" /> <a href="#" class="principal">Informations</a></div>
   <div class="lien"><img src="images/miseajour.gif" alt="Mises à jour" /> <a href="#" class="principal">Mises à jour</a></div>
   <div class="lien"><img src="images/demande.gif" alt="Demande" /> <a href="#" class="principal">Demande</a></div>
   <div class="lien"><img src="images/telecharger.gif" alt="Téléchargements" /> <a href="#" class="principal">Téléchargements</a></div>
   <div class="lien"><img src="images/screenshots.gif" alt="Screenshots" /> <a href="#" class="principal">Screenshots</a></div>
   <div class="lien"><img src="images/signezle.gif" alt="Signez-le!" /> <a href="#" class="principal">Signez-le !</a></div>
   <img src="images/bottom.gif" alt="" />
</div>

Et CSS

Code:

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
div.lien {
 color: maroon;
 background: #FCF8EC;
 padding-top: 5px;
 margin:0;
 width: 300px;
 padding-left: 20px;
 border-bottom: 1px solid;
 border-color: #F7EACB;
}
div.blockcentre {
 margin-left: auto;
 padding: 0;
 margin-right: auto;
 text-align: left;
 margin-top: 150px;
 border: 1px solid maroon;
 width: 300px;
}
img {
 vertical-align: middle;
 border:0;
 margin: 0;
 padding: 0;
}

Merci

09/09/2006, 16h15
MasterOfChakhaL
Peut-être ainsi:
Code:

1 2 3 .blockcentre img { display: block; }
09/09/2006, 19h22
Anduriel

C'est exactement ça!
Merci :D