He intentado establecer el margen y el borde en 0, pero todavía no funciona.¿Cómo eliminar el margen entre dos imágenes?
<style type="text/css">
img {margin:0;}
</style>
<body>
<img src="/static/btnNext.gif" border="0" />
<img src="/static/btnSave.gif" border="0" />
¿Cómo hacer que dos imágenes se mantengan cerca una de la otra?
Puede eliminar el CSS de la imagen y colocar las etiquetas de imagen en la misma línea sin espacio.
<img src="/static/btnNext.gif" border="0" /><img src="/static/btnSave.gif" border="0" />
+1 este es el respuesta correcta en este caso, ya que no produce efectos secundarios (qué 'float: left' y' display: block' do). –
@jeerose +1, gracias! @Mak: en FF 3.6 y Safari usando DOCTYPE, tu ejemplo funciona perfectamente y ¡las nuevas líneas entre las imágenes se IGNORAN! Una excepción (como de costumbre) es obvioulsy IE7 (no intenté IE8) que muestra este extraño comportamiento, y la única solución parece ser la sugerida por jeerose. –
<style type="text/css">
img {margin:0; float: left;}
</style>
no hay flotador de uso recomendado en este caso – GusDeCooL
este css debe pegar las imágenes cerca unos de otros sin ningún espacio, saltos de línea o fronteras entre las imágenes ...
<style type="text/css">
img {margin:0px; padding: 0px; float: left;border:0px}
</style>
Yo sugeriría que poner cada imagen en un flotador estilo div individuo que tiene :izquierda. Estos 2 divs deben encerrarse dentro de un div padre que en sí es float: left como,
<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>
comentario de salida del salto de línea entre ellos.
<img src="/static/btnNext.gif" border="0" /><!--
--><img src="/static/btnSave.gif" border="0" />
¿Por qué? HTML permite tantos espacios (tanto de ruptura como de no) para el formato del código, pero solo muestra el primero. En su caso, las imágenes que están en diferentes líneas se interpretan como un espacio entre ellas. La solución más simple es ponerlos a ambos en una línea, pero eso no es tan fácil de leer.
Acabo de tener este problema, pero no he podido encontrar una respuesta a mi problema, primero no quiero que floten mis imágenes; en segundo lugar, utilizando diplay: bloque no es una buena idea porque los quiero en línea, también pantalla: bloque en línea marcas no funciona.
La SOLUCIÓN es bastante fácil, elimine la "entrada" y coloque las imágenes en la misma línea. Me explico:
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"/>
Así que espero que ayude.
Eso es exactamente lo que dijo la respuesta aceptada 5 años antes de esto. – Gary
espacios Quitar entre img etiquetas y utilizar 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;
}
es probablemente la línea de retorno entre los 2 botones que es el problema – dnagirl