Bonjour,  
 
Sur la page d'accueil de mon site (acmt47.fr), j avais 4 images <img> cote à cote. Tout aller bien. Il y avait 1 espace entre chaque image.  le code etait le suivant  <img> <img> <img> <img> et le résultat était identique.
 
Puis je viens de modifier pour :  
 
<figure>  
  <img ...>  
  <figcaption>...texte ...</figcaption>
</figure>
 
et cela 4 fois.  
 
Mais ca m'a mis les photos l'une en dessous de l'autre (comme des blocks).  
 
J'ai alors mis dans mon fichier CSS :
 
      figure
         {display: inline-block;}
      figcaption
         {color: #aaa;}
 
 
Et là, PRESQUE tres bien. Les 4 images sont bien "en ligne" donc cote à cote sauf que l'espace entre chaque image au lieu d etre d'1 seul espace est au moins de 15 ou 20 espaces !!  alors que je n'ai mis aucun padding, marging ou autre.  
 
Quelqu'un peut-il me dire comment faire pour diminuer cet espace entre 2 photos ?
 
Car du coup, les 4 photos ne tiennent pas et la quatrieme photo passe à la ligne du dessous ! Du coup je suis obligé de ne mettre que 3 photos au lieu de 4.
 
Merci d'avance.

je vais tenter de repondre avec mes maigres connaissances :
il semble qu'il y ait un :

sur l'élément figure (merci inspecter l'élément)
qui est quelquechose d'automatique des navigateurs (chrome pour moi)
 
du coup je dirais que tu dois préciser dans ton css.
figure{margin:0 0}
 
d'ailleurs apres essai ça fonctionne très bien et on peut voir ta 4° image avec le banc et les arbres

Bonjour et merci,  
 
Je viens d essayer "margin" et ca ne fonctionne pas. j ai essayé margin puis margin left... tjrs rien.  
 
J ai FIREFOX 41.0.2 . et je teste tjrs mon site avec IE.  
 
Sur le site, actuellement, il n y a que 3 photos (la quatrieme qui etait en fait à la troisieme position n'apparait pas mais je l'ai laissée dans le code source).  
 
Une autre idée ?  
 
Mon fichier CSS pour cette partie "image" est le suivant :  
 
 #index_part2
     {position:absolute;
      top:28%; left:10%;}
      figure
         {display: inline-block;}
      figcaption
         {color: #aaa;}
 
 
D'avance merci.

NB : Je viens de modifier ma page d accueil.
 
J ai mis les 4 images comme je les voudrais, avec juste un espace entre chaque photo. j'ai un peu reduit leur taille.
 

bah non du coup pas d'autre idée, j'ai modifié ton code comme ça :
 
http://postimg.org/image/6h7efnjwd/
 
et ça fonctionne.

Je viens d'avoir la solution, tu etais sur la bonne voie.  
 
J ai ete sur le site "http://www.w3schools.com/tags/tag_figure.asp" où je vais d'habitude pour apprendre le HTML 5 et CSS3.
 
La reponse est en fait :  
 
figure
         {display: inline-block;
          margin-top: 1em;
          margin-bottom: 1em;
          margin-left: 0px;
          margin-right: 0px;}
      figcaption
         {color: #aaa;}
 
 
et ca fonctionne ! Super.  
 
Merci beaucoup.

pas de quoi, en plus je connaissais pas l'élément figure, ça va me servir pour mon site