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

J'ai une page avec une ligne d'environ 10 imgs. Pour la lisibilité du HTML, je veux mettre un saut de ligne entre chaque imgbalise, mais cela rend les espaces entre les images, ce que je ne veux pas. Puis-je faire autre chose que 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 imgbalises séparées .

Vous pouvez utiliser CSS. Le réglage 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 affectera la mise en page de manière appropriée ou non.

Sinon, vous avez affaire à du contenu en ligne, le formatage HTML est donc important - car les images agiront effectivement comme des mots.

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

Essayez de régler le font-sizesur 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 je l'ai essayé avec Chromium et certains <li>éléments avec display: inline-block;.

Vous pouvez 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'avoir une série d'images côte à côte.

Vous avez deux options sans faire de choses approximatives avec CSS. La première option consiste à utiliser javascript pour supprimer les enfants des balises qui ne contiennent que des espaces. Une option plus intéressante consiste cependant à utiliser le fait que les espaces peuvent exister à l'intérieur des balises sans que cela ait une signification. Ainsi:

<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 peut facilement résoudre ce vieux problème:

.image-wrapper {
  display: flex;
}

Plus d'informations sur flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Après beaucoup trop de recherches, d'essais et d'erreurs, j'ai trouvé un moyen qui semble fonctionner correctement et qui ne nécessite pas de redéfinir manuellement la taille de la police manuellement sur les éléments enfants, ce qui me permet d'avoir une taille de police standardisée dans tout le document. .

Dans Firefox, c'est assez simple, il suffit de définir word-spacing: -1eml'élément parent. Pour une raison quelconque, Chrome ignore cela (et pour autant que je l'ai testé, il ignore l'espacement des mots quelle que soit la valeur). Donc, en plus de cela, j'ajoute letter-spacing: -.31emau parent et letter-spacing: normalaux enfants. Cette fraction d'un em est la taille de l'espace UNIQUEMENT SI votre taille em est normalisée . Firefox, à son tour, ignore les valeurs négatives pour l'espacement des lettres, il ne l'ajoutera donc pas à l'espacement des mots.

J'ai testé ceci sur Firefox 13 (win / ubuntu, 14 sur android), Google Chrome 20 (win / ubuntu), Android Browser sur ICS 4.0.4 et IE 9. Et je suis tenté de dire que cela peut aussi fonctionner sur Safari, mais je ne sais pas vraiment ...

Voici une démo http://jsbin.com/acucam

Je suis trop tard (je viens de poser une question et je trouve mince dans la section correspondante) 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 que cela ne fonctionnera pas sur IE 7 et les versions antérieures, mais cela peut être réparé avec un hack

Utilisez la feuille de style CSS pour résoudre ce problème comme le code suivant.

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

texte alternatif http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgley3tdRNGd2N8e5Xm7pgleyPurePNGP

Test sur Firefox 3.5 Final!

PS. votre html devrait aimer ça.

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

Puis-je faire autre chose que casser au milieu des balises plutôt qu'entre elles?

Pas vraiment. Puisque les <img>s sont des éléments en ligne, les espaces entre ces éléments sont considérés par le moteur de rendu HTML comme de vrais espaces dans le texte - les espaces redondants (et les sauts de ligne) seront tronqués mais les espaces simples le seront insérés dans les données de caractère de l'élément de texte.

Le positionnement des <img>balises peut absolument empêcher cela, mais je vous le déconseille car cela signifierait positionner manuellement chacune des images sur une mesure de pixel, ce qui peut demander beaucoup de travail.

Une autre solution serait d'utiliser des sauts de ligne non conventionnels dans les endroits des espaces. Ceci est similaire aux deux premières réponses et constitue une autre façon d'aligner les éléments. Il s'agit également d'une technique d'optimisation de super-bords car elle remplace les espaces dans votre balisage par des retours chariot.

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

Notez qu'il n'y a aucun espace dans aucun de ce code. Les endroits où les espaces sont normalement utilisés en HTML sont remplacés par des retours chariot. C'est moins verbeux que d'utiliser des commentaires et des espaces comme Paul de Vrieze l'a recommandé.

Merci à tech.co pour cette approche.

espace blanc: initiale; Travaille pour moi.

L'espace entre les éléments n'est mis là que par l'éditeur HTML à des fins de formatage visuel. Vous pouvez utiliser jQuery pour supprimer les espaces:

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

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

});

Cela détache les éléments enfants, efface tout espace blanc qui reste avant de rajouter les éléments enfants.

Contrairement aux autres réponses à cette question, l'utilisation de cette méthode garantit que le css hérité displayet les font-sizevaleurs sont conservés. Il n'y a pas non plus besoin d'utiliser floatet la lourdeur clearqui est alors nécessaire. Bien sûr, vous devrez utiliser jQuery.

Personnellement, j'aime la réponse acceptée indiquant qu'il n'y a pas de moyen exact de le faire, pas sans utiliser une astuce d'une certaine forme.

Pour moi, c'est un problème ennuyeux qui peut parfois vous faire perdre une heure à vous demander pourquoi une rangée de cases à cocher, par exemple, ne sont pas toutes alignées correctement. dont je ne me suis pas souvenu ... mais semble non :(

Quant à la meilleure réponse suivante, l'utilisation de la taille de la police ... pour moi, c'est un méchant hack qui vous mordra plus tard en vous demandant pourquoi votre texte ne s'affiche pas.

Je développe généralement beaucoup avec PHP et dans le cas où je génère une grille de cases à cocher, le contenu généré par PHP supprime ce problème car il n'insère aucun espacement / rupture.

Simplement, je suggérerais de devoir traiter les images toutes sur une seule ligne ou d'utiliser un script côté serveur pour générer le contenu / les images.

Au lieu d'utiliser pour supprimer un CR / LF entre les éléments, j'utilise l'instruction de traitement SGML car les minificateurs suppriment souvent les commentaires, mais pas le PI XML. Lorsque le PI PHP est traité par PHP, il a l'avantage supplémentaire de supprimer complètement le PI avec le CR / LF entre les deux, économisant ainsi au moins 8 octets. Vous pouvez utiliser n'importe quel nom d'instruction valide arbitraire tel que et enregistrer deux octets dans X (HT) ML.

Inspiré de la réponse de Quentin , vous pouvez également placer la fermeture> à côté du début de la balise suivante.

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

Sémantiquement parlant, ne serait-il pas préférable d'utiliser une liste ordonnée ou non et de la styliser de manière appropriée en utilisant 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>

En utilisant CSS, vous pourrez le styliser comme vous le souhaitez et supprimer les espaces entre les livres.