Impossible de décaler une image img src

Bonjour à tous,
Je suis bloqué depuis plusieurs heures sur une chose qui paraît tellement simple, j'espère que quelqu'un saura m'aider ici.
J'utilise Wordpress, et pour rajouter du code dans l'entête du site j'ai alors téléchargé un plugin qui me permet de faire ca et de séparer la version desktop de la version mobile, très pratique, mais peut-être c'est cela qui est en cause, j'espère que vous saurez m'éclairer, voici une capture d'écran de ce plugin et le codage entré dans le but d'insérer deux images, en les décalant du bord de ma page, seulement peu importe le nombre de pixel indiqué, peu importe comment je tourne tous les magin, padding etc rien ne fonctionne.

Et voici le code pour pouvoir le copier coller si vous voulez y faire une correction :

<a href="https://mariusinfo.eu/?page_id=23"><img style=”float: right; margin: 50px 50px 50px 500px;” src="https://img.icons8.com/ios-filled/50/000000/user-female-circle.png" alt="Mon compte"/>
</a>
<a href="https://mariusinfo.eu/?page_id=21"><img src="https://img.icons8.com/fluency/48/000000/wicker-basket.png" alt="Panier">

Merci

Salut,

Je te propose le code HTML suivant :

		<div class="flottement">
			<a href="https://mariusinfo.eu/?page_id=23">
				<img src="https://img.icons8.com/ios-filled/50/000000/user-female-circle.png" alt="Mon compte"/>
			</a>
			<a href="https://mariusinfo.eu/?page_id=21">
				<img src="https://img.icons8.com/fluency/48/000000/wicker-basket.png" alt="Panier">
			</a>
		</div>
		<div class="annulation_flottement"></div>

et le code CSS suivant :

.annulation_flottement{
	clear: both;
}

div.flottement{
	float: right;
	margin: 50px 50px 50px 500px;
}

J'ai placé tes deux liens <a> et tes deux images <img> dans un <div> avec une classe. Tu ne peux pas directement placer des marges à une balise <img> parce qu'elle est de type inline. Seuls les balises de type block peuvent recevoir des marges.

Source :
https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

J'ai ensuite placé un <div> vide à la fin pour annuler le flottement et reprendre le flux normal.

J'ai essayé en plaçant les propriétés de flottement et de marge dans un attribut style, dans la page HTML, mais ça ne marche pas. Le mieux serait que tu places les propriétés de mise en forme dans une feuille de styles CSS. Je n'utilise que rarement l'attribut style.

Que le code soit avec toi !
Modifié par ObiJuanKenobi (11 Feb 2022 - 18:52)