Suppression des espaces blancs entre les éléments HTML lors de l'utilisation de sauts de ligne

Question

J'ai une page avec une rangée d'environ 10 img s. Pour la lisibilité du HTML, je veux mettre un saut de ligne entre chaque img mais cela crée des espaces blancs entre les images, ce que je ne veux pas. Y a-t-il quelque chose que je puisse faire, à part casser au milieu des balises plutôt qu'entre elles ?

Edit : Voici une capture d'écran de ce que j'ai jusqu'à présent. Je voudrais que les images du dos du livre s'affichent dans des combinaisons aléatoires, en utilisant PHP. C'est pourquoi j'ai besoin de img tags.

Answer 1

Désolé si c'est vieux mais je viens de trouver une solution.

Essayez de régler le font-size à 0. Ainsi, les espaces blancs entre les images auront une largeur de 0, et les images ne seront pas affectées.

Je ne sais pas si cela fonctionne dans tous les navigateurs, mais j'ai essayé avec Chromium et quelques <li> éléments avec display: inline-block; .

Answer 2

Vous pourriez utiliser des commentaires.

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

Je m'inquiéterais cependant de la sémantique d'une série d'images côte à côte.

Answer 3

Vous pourriez utiliser CSS. Le fait de définir display:block ou float:left sur les images vous permettra de définir votre propre espacement et de formater le HTML comme vous le souhaitez, mais cela affectera la mise en page d'une manière qui pourrait ou non être appropriée.

Dans le cas contraire, il s'agit de contenu en ligne et le formatage HTML est donc important, car les images se comportent comme des mots.

Answer 4

Vous avez deux options sans faire de trucs approximatifs avec CSS. La première option consiste à utiliser javascript pour supprimer les enfants des balises qui ne sont que des espaces blancs. Une option plus agréable consiste à utiliser le fait que les espaces blancs peuvent exister à l'intérieur des balises sans avoir de signification. Par exemple :

<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>

Answer 5

J'arrive trop tard (je viens de poser une question et je trouve que c'est mince dans la section connexe) mais je pense que display:table-cell ; est une meilleure solution

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

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

Le seul problème est qu'il ne fonctionne pas sur IE 7 et les versions antérieures, mais cela peut être résolu avec un hack.