<img> sin espacio

<html> 
<head> 
    <meta name="viewport" content="width=device-width"/> 
    <title>HAHAHA</title> 
    <STYLE TYPE="text/css" media="screen"> 
    * 
    { 
    padding: 0; 
    margin: 0; 
    } 
    body 
    { 
    padding: 0; 
    margin: 0; 
    } 
    #flexbox 
    { 
    //display: -webkit-box; 
    //-webkit-box-orient: horizontal; 
    //-webkit-box-align: stretch; 
    //width: auto; 
    } 
    </STYLE> 
</head> 
<BODY style="padding:0;margin:0;border:0;"> 
    <!--<div id="flexbox"> 
    <img src="1.jpg" width="100px" style="padding:0;margin:0;"/> 
    <img src="1.jpg" width="100px"/> 
    <img src="1.jpg" width="100px"/> 
    </div>--> 
    <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/> 
    <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/> 
</BODY> 
</html>

¿Por qué estas imágenes siempre tienen un pequeño espacio entre ellos, aunque tenga el relleno & margen que se fijará a 0 en el cuerpo y todos los demás elementos de la página?<img> sin espacio

OK este es el código completo no editado.

EDIT: acaba de descubrir que es el salto de línea entre los dos IMG. SO ... no puedo presionar enter entre los dos elementos? lol ... :)

Fuente

2011-01-07 denicio

¿Puede darnos su código CSS? – Sotiris

no es así solo por su código: http://jsbin.com/atigu5 - el código que no nos ha mostrado está causando el problema –

se ha asegurado de que las imágenes no tengan algún tipo de borde en la imagen real ... –

las imágenes se muestran inline de forma predeterminada, que es probable que su problema. Los caracteres de espacio en blanco en HTML se condensan, sin embargo, seguirán apareciendo como un espacio si existe alguno entre los elementos HTML.

El siguiente HTML se representará con un ligero espacio entre las imágenes.

<div class="images"> 
    <img src="http://placehold.it/400x300" /> 
    <img src="http://placehold.it/400x300" /> 
</div>

Si desea hacerlos ras uno contra el otro, podría intentar flotar las imágenes:

img { 
    float: left; 
}

flotante viene con sus propios problemas si usted es nuevo a CSS.

Una alternativa es ajustar el marcado para eliminar los caracteres adicionales de espacio en blanco. Una forma común de hacer esto es llamado "pescado" sintaxis:

<div class="images" 
    ><img src="http://placehold.it/400x300" 
    /><img src="http://placehold.it/400x300" 
/></div>

La forma en que funciona es que el carácter de cierre > de cada elemento se mueve a justo antes el carácter comienzo < de tal manera que no hay espacios en blanco dentro de cualquier elemento HTML como contenido. En cambio, los espacios en blanco para sangría están dentro de las etiquetas HTML, donde el espacio en blanco se ignora por completo.

Hubo un w3c feature request for a new property on white-space, que teóricamente podría permitir que CSS elimine todos los espacios de un elemento. La propuesta orignal fue white-space: ignore;, sin embargo, prefiero (y sugiero) white-space: none;.

Parece, sin embargo, que la actualización de white-space no es probable que suceda, y en su lugar la sugerencia era utilizar FlexBox para eliminar espacios adecuadamente:

_{se extiende fuera el ejemplo HTML original:}

.images { 
    display: flex; 
}

De Por supuesto, pasará algún tiempo antes de que Flexbox tenga suficiente soporte de navegadores cruzados para ser útil en un entorno comercial, por lo que por el momento recomiendo seguir con la sintaxis de pescado.

Fuente

2011-01-07 19:02:43 zzzzBov

Esta es la respuesta más completa cuando revisé después de bastante tiempo. Y también me gustaría agregar a su respuesta que hay un "bloque en línea" que parece ser el más correcto para mi pregunta inicial. – denicio

Creo que esto también es necesario si está viendo en una versión anterior de IE

img { 
    border:0 
    }

Fuente

2011-01-07 19:07:26

Aunque creo que el problema viene desde otro punto en su margen de ganancia, y/o CSS, lo haría sugieren asegurando que ha llevado a cero tanto margin, padding y border para el elemento img:

img { 
margin: 0; 
padding: 0; 
border-width: 0; 
}

Este debe hacerse cargo del problema, pero si no es así, podemos necesitar ver su html y css real (o una demostración en vivo que reproduce el problema, en JS Bin, o JS Fiddle) para ayudarlo a avanzar.

Fuente

2011-01-07 19:07:58

No puedo presionar enterin entre los dos elementos? lol ... :)

Nada distingue un tipo de espacio en blanco de otro en la mayor parte de HTML.

Puede, sin embargo, el formato de su código de este tipo:

<img src="..." alt="..." 
><img src="..." alt="...">

... para eliminar el espacio entre los elementos.

Fuente

2011-01-07 19:18:09 Quentin

Gracias, todavía me parece tan raro :) – denicio

Hay un buen truco para superar esto:

que colocar las imágenes dentro de un <div> y luego establecen

font-size:0px;

a la <div>.

Puede continuar manteniendo los elementos en líneas separadas.

Fuente

2013-05-11 03:32:58

Respuesta

Cuestiones relacionadas