Icône à côté de h1 avec position: relative

Question

Je souhaite avoir une image à côté de mon en-tête. Mais la chose est que je veux que cette image soit fixée avec la position: relative. Pourtant, quand j'ai corrigé l'image, cela fait un grand espace entre l'image et mon titre.

<h1 id="htitre"><img src="title.png"/> title </h1> 

CSS:

h1 
{ 
    color: rgb(114, 159, 207); 
    padding-bottom: 3px; 
    border-bottom: 5px solid rgb(114, 159, 207); 
    padding-left:0.3cm; 
    margin-left: 0.9cm; 

} 

#htitle img 
{ 

position: relative; 
top: 0.15cm; 
right:1.5cm; 
border: 1px 

} 

Comment pourrais-je empêcher l'image de bouger mon titre?

Answer 1

Voulez-vous quelque chose comme ça? Si c'est ce que vous voulez, tout ce que vous devez faire est de remplacer votre h1 par span, car h1 prend toute la largeur de la rangée et ensuite assigner les propriétés de taille et de poids à votre classe d'envergure comme vous le voulez.

Voici votre code mis à jour -

HTML

<div> 
    <img src="title.png"/> 
    <span id="htitle"> 
    title 
    </span> 
</div> 

CSS

#htitle 
{ 
    color: rgb(114, 159, 207); 
    padding-bottom: 3px; 
    border-bottom: 5px solid rgb(114, 159, 207); 
    padding-left:0.3cm; 
    margin-left: 0.9cm; 
    font-size: 4em; 
} 

#htitle img 
{ 
    position: relative; 
    top: 0.15cm; 
    right:1.5cm; 
    border: 1px; 
}