Icon next to h1 with position:relative - header

Question

I want to have an image next to my header. But the thing is that I want this image fixed with position:relative.
Yet, when I fixed the image, it is making a big space between the image and my title.
<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
}
How could I prevent the image from moving my title ?

Answer 1

Do you want something like this? https://jsfiddle.net/o2mxesua/1/
If that's what you want, all you need to do is to replace your h1 by span because h1 takes the entire row width and then assign the font size and weight properties to your span class in whatever way you want.
Here is your updated code -
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;
}