Eliminar espacios en blanco entre elementos HTML al usar saltos de línea

Tengo una página con una fila de aproximadamente 10 imgs. Para facilitar la lectura del HTML, quiero poner un salto de línea entre cada imgetiqueta, pero al hacerlo, se generan espacios en blanco entre las imágenes, lo cual no quiero. ¿Hay algo que pueda hacer además de romper en medio de las etiquetas en lugar de entre ellas?

Editar: Aquí hay una captura de pantalla de lo que tengo hasta ahora. Me gustaría que las imágenes del lomo del libro se mostraran en combinaciones aleatorias, usando PHP. Por eso necesito imgetiquetas separadas .

Podrías usar CSS. Configurar display: block, o float: left en las imágenes le permitirá definir su propio espaciado y formatear el HTML como desee, pero afectará el diseño de formas que podrían ser apropiadas o no.

De lo contrario, se trata de contenido en línea, por lo que el formato HTML es importante, ya que las imágenes actuarán efectivamente como palabras.

Lo siento si esto es viejo pero acabo de encontrar una solución.

Intente establecer el font-sizeen 0. Por lo tanto, los espacios en blanco entre las imágenes serán 0 de ancho y las imágenes no se verán afectadas.

No sé si esto funciona en todos los navegadores, pero lo probé con Chromium y algunos <li>elementos con display: inline-block;.

Podrías usar comentarios.

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

Sin embargo, me preocuparía la semántica de tener una serie de imágenes una al lado de la otra.

Tienes dos opciones sin hacer cosas aproximadas con CSS. La primera opción es usar javascript para eliminar los elementos secundarios de solo espacios en blanco de las etiquetas. Sin embargo, una mejor opción es utilizar el hecho de que los espacios en blanco pueden existir dentro de las etiquetas sin que tengan un significado. Al igual que:

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Flexbox puede solucionar fácilmente este viejo problema:

.image-wrapper {
  display: flex;
}

Más información sobre flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Después de demasiada investigación, prueba y error, encontré una forma que parece funcionar bien y no requiere volver a configurar manualmente el tamaño de fuente en los elementos secundarios, lo que me permite tener un tamaño de fuente em estandarizado en todo el documento. .

En Firefox esto es bastante simple, simplemente configúrelo word-spacing: -1emen el elemento principal. Por alguna razón, Chrome ignora esto (y por lo que probé, ignora el espaciado de palabras independientemente del valor). Entonces, además de esto, agrego letter-spacing: -.31ema los padres y letter-spacing: normala los hijos. Esta fracción de em es el tamaño del espacio SOLO SI su tamaño de em está estandarizado . Firefox, a su vez, ignora los valores negativos para el espacio entre letras, por lo que no lo agregará al espacio entre palabras.

Probé esto en Firefox 13 (win / ubuntu, 14 en android), Google Chrome 20 (win / ubuntu), navegador Android en ICS 4.0.4 e IE 9. Y estoy tentado a decir que esto también puede funcionar en Safari, pero realmente no lo sé ...

Aquí hay una demostración http://jsbin.com/acucam

Llego demasiado tarde (acabo de hacer una pregunta y me parece delgado en la sección relacionada) pero creo que display: table-cell; es una mejor solución

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

el único problema es que no funcionará en IE 7 y versiones anteriores, pero eso se puede arreglar con un truco

Utilice la hoja de estilo CSS para resolver este problema como el siguiente código.

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

texto alternativo http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2PLyPN08

Probando en Firefox 3.5 Final!

PD. su html debería gustarle esto.

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

¿Hay algo que pueda hacer además de romper en medio de las etiquetas en lugar de entre ellas?

Realmente no. Dado que los <img>s son elementos en línea, el renderizador HTML considera los espacios entre estos elementos como espacios verdaderos en el texto; los espacios redundantes (y saltos de línea) se truncarán, pero los espacios simples se insertarán en los datos de caracteres del elemento de texto.

La colocación de las <img>etiquetas puede prevenir esto absolutamente, pero desaconsejaría esto, ya que esto significaría colocar cada una de las imágenes manualmente en alguna medida de píxeles, lo que puede suponer mucho trabajo.

Otra solución sería utilizar saltos de línea no convencionales en lugares de espacios. Esto es similar a las respuestas del primer par y es una forma alternativa de alinear elementos. También es una técnica de optimización de super-borde porque reemplaza espacios en su marcado con retornos de carro.

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

Tenga en cuenta que no hay espacios en ninguno de esos códigos. Los lugares donde los espacios se utilizan normalmente en HTML se reemplazan con retornos de carro. Es menos detallado que usar comentarios y usar espacios en blanco como recomendaba Paul de Vrieze.

Crédito a tech.co por este enfoque.

espacio en blanco: inicial; Funciona para mi.

El espacio en blanco entre los elementos solo lo coloca el editor HTML con fines de formato visual. Puede usar jQuery para eliminar el espacio en blanco:

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

Esto separa los elementos secundarios, borra cualquier espacio en blanco que quede antes de volver a agregar los elementos secundarios.

A diferencia de las otras respuestas a esta pregunta, el uso de este método garantiza que se mantengan los valores displayy los css heredados font-size. Tampoco hay necesidad de usar floaty lo engorroso clearque se requiere. Por supuesto, necesitará usar jQuery.

Personalmente, me gusta la respuesta aceptada que dice que no hay una forma exacta de hacer esto, no sin usar un truco de alguna forma.

Para mí, es un problema molesto que a veces puede hacer que pierda una hora preguntándose por qué una fila de casillas de verificación, por ejemplo, no están todas alineadas correctamente. que no me he acordado ... pero parece que no :(

En cuanto a la siguiente mejor respuesta, de usar el tamaño de fuente ... para mí, este es un truco desagradable que lo morderá más tarde al preguntarse por qué no se muestra su texto.

Por lo general, desarrollo mucho con PHP y, en el caso de que esté generando una cuadrícula de casillas de verificación, el contenido generado por PHP elimina este problema, ya que no inserta ningún espacio / ruptura.

Simplemente, sugeriría tener que lidiar con todas las imágenes en una sola línea juntas o usar un script del lado del servidor para generar el contenido / las imágenes.

En lugar de usar para eliminar un CR / LF entre elementos, utilizo la instrucción de procesamiento SGML porque los minificadores a menudo eliminan los comentarios, pero no el PI XML. Cuando PHP procesa el PI de PHP, tiene el beneficio adicional de eliminar el PI por completo junto con el CR / LF intermedio, ahorrando así al menos 8 bytes. Puede utilizar cualquier nombre de instrucción válido arbitrario, como y guardar dos bytes en X (HT) ML.

Inspirado por la respuesta de Quentin , también puede colocar el cierre> junto al inicio de la siguiente etiqueta.

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

Hablando semánticamente, ¿no sería mejor usar una lista ordenada o desordenada y luego darle un estilo apropiado usando CSS?

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

Usando CSS, podrá diseñar esto de la manera que desee y eliminar el espacio en blanco entre los libros.