Corregir la syntax de marcado HTML? (para eliminar espacios en blanco entre elementos de bloque en línea)

Cuando el código html no está ’embellecido’, parece que

Y luego estas imágenes se muestran como

 |=||=| //no gap between 

Pero después del embellecedor http://ctrlq.org/beautifier/

 

Se representan así

 |=| |=| // gap (space) between 

Entonces, el mismo código se procesó de manera diferente. Quiero saber cómo hacer la syntax correcta para html inlined elements (y html en absoluto)?

(Inlined podría ser incluso elementos de ‘locking’), así que no sé cómo escribir código que pueda ser legible y renderizado correctamente (sin espacios al menos entre elementos).

¿Alguna sugerencia? =)

Hay varias opciones para mostrar elementos de bloque en línea de una manera fácil de leer, ninguna de las cuales es perfecta.

Opción 1 : Flotadores izquierdos

Aquí hay un tutorial sobre Floats en general: http://css.maxdesign.com.au/floatutorial/. Es muy recomendable que todos los desarrolladores de front-end estén bien versados ​​en este tema.

Opción 2 : comentarios nesteds (ya publicados)

 

Opción 3 (potencialmente en el futuro): text-space-collapse: discard; (anteriormente white-space-collapse: discard; )

El white-space-collapse propiedad CSS no se recomienda debido a la mala adopción del navegador (ver comentario a continuación). Parece que esta propiedad ya no forma parte de la especificación de decoración de texto. También he encontrado que la referencia al text-space-collapse se considera para el futuro.

Opción 4 : No intentes

No puede esperar tener un código bonito cuando usa display: inline-block. En mi opinión, el uso de bloques en línea y el deseo de código hermoso son mutuamente excluyentes sin el uso de float: left.

Opción 5 : Agregar font-size: 0 a un elemento principal. Aparentemente, esto no funciona con Safari, por lo que la solución tiene un valor similar al white-space-collapse: discard; .

Dependiendo de su navegador, puede representarse como un espacio. Puedes intentar esto:

 

Sé que me odiarán por decir esto. Buuuuut ….

Si desea ubicar sus img con precisión una al lado de la otra Y tiene un código “embellecido”, debe usar una tabla.

Cue screaming

Con css puedes hacer lo que quieras con 2 img en un div excepto colocarlos exactamente como una mesa.

Este código …

 

obtendrá el resultado que desea, pero la pregunta es, ¿puede vivir consigo mismo después?

Relevent violín http://jsfiddle.net/t4Krs/

No es bonito, pero es más bonito que el truco de comentarios en mi opinión:

 
< img src="http://sofes.miximages.com/html/img1.jpg"/>< img src="http://sofes.miximages.com/html/img2.jpg" >