How can I move the text position downwards using CSS?

Question

I want to move the text "Hi" downwards because the PNG file makes it separate too much from the rest of the text.

 body { background-color: #1d1d1d; }.content { padding-top: 200px; padding-bottom: 200px; padding-left: 100px }.content > h1 { color: white; font-family: 'Montserrat', sans-serif; font-size: 30px; }

 <article id="main" class="content"> <h1>Hi, <br/> I'm <img src="../Sources/Untitled-2.png" alt="V">ictor, <br/> just another Video Editor. </h1> </article>

Answer 1

You can add a <p> tag to your "Hi," to be able to refer to that part of the text only. In this case, I added a class as well <p class="hiText">Hi, </p> .

Then in the CSS, I referred to the hiText class and applied the following properties:
position: absolute; This sets the position of the text to absolute.
padding-top: -40px; This moves the text downwards. You can change 40px to any desired number and/or measurement unit.

Hope this answers your question!

 body { background-color: #1d1d1d; }.content { padding-top: 200px; padding-bottom: 200px; padding-left: 100px }.content > h1 { color: white; font-family: 'Montserrat', sans-serif; font-size: 30px; }.hiText { position: absolute; padding-top: -40px; }

 <article id="main" class="content"> <h1><p class="hiText">Hi, </p><br/> I'm <img src="../Sources/Untitled-2.png" alt="V">ictor, <br/> just another Video Editor. </h1> </article>

Answer 2

I put "Hi," in a <p class="hiText"> </p> and then used

.hiText {
    position: relative;
    top: 38px;
}