how do i put an image on top of an hr-CodePudding

I have tried 2-3 solutions, and it still didn't work.

it keeps overlapping the <hr> tag and I don't know how to keep it above the line
I'm not able to send pictures yet, but I can send some test code that I tried

<style>
div.box5 {
     display: block;
     margin: 0, 0, 0, 0;
}
</style>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/1200px-Cog_font_awesome.svg.png" alt="picture">
<div >
<hr>
</div>

CodePudding user response：

Is this you looking for? Please share your output so community can better help you.

<style>
 div.box5 {
 display: block;
 margin: 0, 0, 0, 0;
}
</style>
<div >
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/1200px-Cog_font_awesome.svg.png" width=200 alt="picture">
<hr>
</div>

CodePudding user response：

I cant get right what you are asking, but I think you are asking for keep the line above the image. Just type the <hr> tag above image.