Bonjour la communauté des développeurs,

Faisant suite à ma formation, je vous soumets un problème dont mon enseignant ne m'a pas apporté de solution.

Considérons le code suivant :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<figure><img src="image.jpg" alt="" title="">
     <figcaption>Légende de la photo.</figcaption>
</figure>

La balise <figure> sert au référencement et permet de dynamiser les images dans les recherches grâce à un nom qui a un sens. Ainsi, lorsqu'on utilise Google images, pour peu que les noms des fichiers soient sémantiques, et non du genre "image1.jpg" ou "mon_image.jpg", mais plutôt du genre "entree_du_musee_du_louvre.jpg" ou encore "vaches_paitrant_dans_un_pre.jpg", les photos auront un meilleur classement dans les pages.

Mais, quand on exécute la page HTML sur un navigateur, il y a un décrochage sur le côté gauche comme si on avait mis une indentation : la photo n'est plus alignée à gauche avec le texte d'en dessous !
Ma question est la suivant : y a-t-il moyen d'éviter cela ? Si oui, comment faire ?

Merci pour vos réponses.