quitar - salto de linea html/n
Eliminar espacios en blanco entre elementos HTML al usar saltos de línea (15)
Tengo una página con una fila de aproximadamente 10 img s. Para la legibilidad del HTML, quiero poner un salto de línea entre cada etiqueta img , pero al hacerlo renderiza espacios en blanco entre las imágenes, lo que no quiero. ¿Hay algo más que pueda hacer que romper en el 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 muestren en combinaciones aleatorias, utilizando PHP. Es por eso que necesito etiquetas de img separadas.
¿Hay algo más que pueda hacer que romper en el medio de las etiquetas en lugar de entre ellas?
Realmente no. Como <img> s son elementos en línea, el renderizador HTML considera los espacios entre estos elementos como verdaderos espacios en el texto: los espacios redundantes (y los saltos de línea) se truncarán pero los espacios individuales se insertarán en los datos del carácter del elemento de texto.
Posicionar las etiquetas <img> puede evitarlo, pero desaconsejaría esto, ya que esto significaría colocar cada una de las imágenes manualmente en una medida de píxel, lo que puede ser mucho trabajo.
Después de demasiada investigación, prueba y error, encontré una manera que parece funcionar bien y no requiere volver a configurar manualmente el tamaño de fuente de forma manual en los elementos secundarios, lo que me permite tener un tamaño de letra estandarizado en todo el documento. .
En Firefox esto es bastante simple, solo establece word-spacing: -1em en el elemento padre. Por alguna razón, Chrome ignora esto (y en cuanto lo he probado, ignora el espaciado de palabras independientemente del valor). Así que, además de esto, agrego letter-spacing: -.31em para el padre y letter-spacing: normal para los niños. Esta fracción de un em es el tamaño del espacio SÓLO SI su tamaño de em es estandarizado . Firefox, a su vez, ignora los valores negativos para el espaciado entre letras, por lo que no lo agregará al espaciado entre palabras.
Probé esto en Firefox 13 (win / ubuntu, 14 en android), Google Chrome 20 (win / ubuntu), Android Browser en ICS 4.0.4 e IE 9. Y estoy tentado de decir que esto también puede funcionar en Safari, pero realmente no lo sé ...
Aquí hay una demo http://jsbin.com/acucam
El espacio en blanco entre los elementos solo se coloca allí por el editor de HTML para 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 asegura que se mantienen los valores heredados de display css y font-size . Tampoco es necesario usar float y la incómoda clear que se requiere. Por supuesto, necesitarás usar jQuery.
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 XML PI. Cuando el PHP PI es procesado por PHP, tiene la ventaja adicional de eliminar el PI por completo junto con el CR / LF intermedio, ahorrando al menos 8 bytes. Puede utilizar cualquier nombre de instrucción válido arbitrario, como guardar dos bytes en X (HT) ML.
Estoy demasiado tarde (acabo de hacer una pregunta y encuentro delgada en la sección relacionada) pero creo que se muestra: 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 reparar con un hack
Flexbox puede solucionar fácilmente este viejo problema:
.image-wrapper {
display: flex;
}
Más información sobre flexbox: css-tricks.com/snippets/css/a-guide-to-flexbox
Hablando semánticamente, ¿no sería mejor usar una lista ordenada o desordenada y luego diseñarla de manera adecuada con 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>
Al usar CSS, podrá darle un estilo de esta manera y eliminar los espacios en blanco entre los libros.
Lo siento si esto es viejo, pero acabo de encontrar una solución.
Intente configurar el font-size en 0. Por lo tanto, los espacios en blanco entre las imágenes serán 0 en 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 elementos <li> con display: inline-block; .
Otra solución sería utilizar saltos de línea no convencionales en lugares de espacios. Esto es similar a las primeras respuestas de pareja, y es una forma alternativa de alinear elementos. También es una técnica de optimización de vanguardia 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 normalmente se usan en HTML se reemplazan por retornos de carro. Es menos detallado que usar comentarios y usar espacios en blanco como recomienda Paul de Vrieze.
Crédito a tech.co por este enfoque.
Personalmente, me gusta la respuesta aceptada que indica que no hay una forma exacta de hacerlo, sin utilizar un truco de alguna forma.
Para mí, es un problema molesto que a veces puede hacer que pierdas una hora preguntándote por qué una fila de casillas de verificación, por ejemplo, no están todas alineadas correctamente. Por lo tanto, tenía que tener un Google rápido y comprobar si había una regla de CSS. que no he recordado ... pero parece que no :(
En cuanto a la siguiente mejor respuesta, de utilizar el tamaño de fuente ... para mí, este es un hack desagradable que te morderá más tarde y te preguntará por qué tu texto no se muestra.
En general, desarrollo mucho con PHP y en el caso de que genere una grilla de casillas de verificación, el contenido generado por PHP elimina este problema ya que no inserta espaciamiento / roturas.
Simplemente, sugeriría tener que tratar con las imágenes todas juntas en una sola línea o usar un script del lado del servidor para generar el contenido / imágenes.
Podría usar CSS. Configuración de visualización: bloqueo o flotación: a la izquierda de las imágenes, podrá definir su propio espaciado y formatear el HTML de la manera que 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.
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 aproximaciones con CSS. La primera opción es usar javascript para quitar a los niños de solo espacios en blanco de las etiquetas. Sin embargo, una opción más agradable es utilizar el hecho de que el espacio en blanco puede existir dentro de las etiquetas sin que tenga 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>
Use hojas de estilo CSS para resolver este problema, como el siguiente código.
[divContainer_Id] img
{
display:block;
float:left;
border:0;
}
¡Prueba en la Final de Firefox 3.5!
PD. tu html debería tener 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>
espacio en blanco: inicial; Funciona para mi.