How can I move the text position downwards using CSS? - html

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;
}