web-dev-qa-db-fra.com

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

J'ai une page avec une rangée d'environ 10 imgs. Pour assurer la lisibilité du code HTML, je souhaite insérer un saut de ligne entre chaque balise img, mais cela restitue l'espace entre les images, ce que je ne souhaite pas. Est-ce que je peux faire autre chose que de casser au milieu des tags plutôt qu'entre eux?

Edit: Voici une capture d'écran de ce que j'ai jusqu'à présent. J'aimerais que les images de la colonne du livre s'affichent en combinaisons aléatoires à l'aide de PHP. C'est pourquoi j'ai besoin de balises img distinctes.

Screenshot

htmlcssimage
94
Skilldrick

Vous pouvez utiliser CSS. En définissant display: block ou float: à gauche des images, vous aurez la possibilité de définir votre propre espacement et de formater le code HTML comme vous le souhaitez, tout en modifiant 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 agissent comme des mots.

66
edeverett

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

Essayez de régler le font-size sur 0. Ainsi, les espaces entre les images auront une largeur égale à 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 du chrome et des éléments <li> avec display: inline-block;.

149
opatut

Vous pouvez utiliser des commentaires.

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

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

65
Quentin

Vous avez deux options sans faire de calcul approximatif avec CSS. La première option consiste à utiliser javascript pour supprimer les enfants ne contenant que des espaces. Une option plus intéressante consiste à utiliser le fait que les espaces peuvent exister à l'intérieur des balises sans que cela ait de sens. 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>
22
Paul de Vrieze

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/

13
William Grasel

Je suis trop tard (je viens de poser une question et de trouver 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 qu'il est possible de le réparer avec un hack

12
Vladimir

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

Dans Firefox, c'est assez simple, il suffit de définir Word-spacing: -1em sur l'élément parent. Pour une raison quelconque, Chrome ignore ceci (et pour autant que j'ai testé, il ignore l'espacement des mots quelle que soit la valeur). Donc à côté de cela, j'ajoute letter-spacing: -.31em au parent et letter-spacing: normal aux 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é cela sur Firefox 13 (Win/Ubuntu, 14 sur Android), Google Chrome 20 (Win/Ubuntu), le navigateur Android sur ICS 4.0.4 et IE 9. Et je suis tenté de dis que cela peut aussi fonctionner sur Safari, mais je ne sais pas vraiment ...

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

12
Flatline

Est-ce que je peux faire autre chose que de casser au milieu des tags plutôt qu'entre eux?

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

Positionner les balises <img> peut absolument empêcher cela, mais je vous le déconseille, car cela impliquerait de positionner manuellement chaque image sur une mesure en pixels qui peut prendre beaucoup de travail.

3
Konrad Rudolph

Une autre solution consisterait à utiliser des sauts de ligne non conventionnels à la place d'espaces. Ceci est similaire aux réponses du premier couple et constitue une manière alternative d’aligner des éléments. C'est également une technique d'optimisation super-Edge car elle remplace les espaces de votre balisage par des retours à la ligne.

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

Notez qu'il n'y a pas d'espaces dans ce code. Les espaces où des espaces sont normalement utilisés en HTML sont remplacés par des retours à la ligne. C'est moins bavard que d'utiliser des commentaires et d'utiliser des espaces comme le recommande Paul de Vrieze.

Crédit à tech.co pour cette approche.

1
user1214836

espace blanc: initial; Travaille pour moi.

1
Artur

Personnellement, j'aime bien la réponse acceptée selon laquelle il n'y a pas de moyen exact de le faire, pas de faire appel à une astuce quelconque.

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. Par conséquent, j’avais besoin d’un rapide google et moi-même pour vérifier s’il existait une règle CSS que je ne me suis pas souvenu ... mais semble non: (( 

Pour ce qui est de la meilleure solution, utiliser la taille de la police ... pour moi, c’est un sale bidouillage qui vous mordra plus tard en vous demandant pourquoi votre texte n’est pas affiché.

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 pas d'espacement/de pause.

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

0
Mayhem

Au lieu d’utiliser pour supprimer un CR/LF entre des éléments, j’utilise l’instruction de traitement SGML, car les minificateurs suppriment souvent les commentaires, mais pas l’IP XML. Lorsque l'IP PHP est traité par PHP, il présente l'avantage supplémentaire de supprimer l'intégralité de l'IP ainsi que celle du CR/LF, économisant ainsi au moins 8 octets. Vous pouvez utiliser n’importe quel nom d’instruction valide quelconque et enregistrer deux octets dans X (HT) ML.

0
John Freeman

Les espaces entre les éléments ne sont 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 tous les espaces qui restent avant de rajouter les éléments enfants.

Contrairement aux autres réponses à cette question, l’utilisation de cette méthode garantit que les valeurs héritées css display et font-size sont conservées. De plus, il n'est pas nécessaire d'utiliser float et la lourde clear qui est alors requise. Bien sûr, vous devrez utiliser jQuery.

0
Moose Factory