J'ai essayé de définir la marge et la bordure à 0, mais ne fonctionne toujours pas.Comment supprimer la marge entre deux images?
<style type="text/css">
img {margin:0;}
</style>
<body>
<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />
Comment faire pour que deux images restent proches l'une de l'autre?
Vous pouvez éliminer le css de l'image et placer les balises d'image sur la même ligne sans espace.
<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />
+1 ceci est le réponse correcte dans ce cas car il ne produit aucun effet secondaire (ce que 'float: left' et' display: block' font). –
@jeerose +1, merci! @Mak: sur FF 3.6 et Safari en utilisant DOCTYPE votre exemple fonctionne parfaitement et les nouvelles lignes entre les images sont IGNORÉES! Une exception (comme d'habitude) est IE7 évidente (n'a pas essayé IE8) qui montrent ce comportement étrange, et la seule solution de contournement semble être celle suggérée par jeerose. –
<style type="text/css">
img {margin:0; float: left;}
</style>
pas d'utilisation recommandée float dans ce cas – GusDeCooL
ce devrait coller les css images de eachother sans près d'espace, ou linebreaks frontières entre les images ...
<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>
Je suggère de mettre chaque image dans un individu div ayant flotteur de style :la gauche. Ces 2 divs doivent être inclus dans un div parent qui est lui-même flottant: gauche comme,
<div style="float:left">
<div style="float:left">
<img src="/static/btnNext.gif" border="0" />
</div>
<div style="float:left">
<img src="/static/btnSave.gif" border="0" />
</div>
</div>
Commentez le saut de ligne entre eux.
<img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />
Pourquoi? HTML autorise autant d'espaces (à la fois brisés que non) pour le formatage du code, mais affiche uniquement le premier. Dans votre cas, les images étant sur des lignes différentes est interprétée comme un espace entre elles. La solution la plus simple est de les mettre tous les deux sur une ligne, mais ce n'est pas aussi lisible.
Je viens d'avoir ce problème, mais je n'ai pas trouvé de réponse à mon problème, d'abord je ne veux pas que mes images flottent à gauche; Deuxièmement, en utilisant diplay: bloc n'est pas une bonne idée parce que je les veux en ligne, aussi affichage: bloc en ligne fait ne fonctionne pas. La solution est assez facile, supprimez l'entrée et placez vos images dans la même ligne. J'explique:
MAL
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
<img src="flower1.jpg"/>
OK
<img src="flower1.jpg"/><img src="flower1.jpg"/><img src="flower1.jpg"/>
Alors espérons qu'il aide.
C'est exactement ce que la réponse acceptée a dit 5 ans avant cela. – Gary
espaces Supprimer entre img balises et utiliser css vertical-align:top
HTML:
<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>
CSS:
img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}
il est probablement le retour de la ligne entre les 2 boutons qui est le problème – dnagirl