How to Move the Text Up Using CSS

1. Use the position and bottom CSS Properties to Move the Text Up
2. Use the margin-top CSS Property to Move the Text Up

Sometimes, while developing web pages, we put the texts at the bottom or in the footer, so we might need to leave a space below the text and move the text up. We will learn how to move up the text from the webpage’s bottom.

Use the position and bottom CSS Properties to Move the Text Up

In the example below, we have created the <div> element, which we can identify using the bottom-text class name. Inside the <div> element, we have added the <h3> element with some text and assigned a text class to it.

In CSS code, we have given position: absolute to the <div> element to move it relative to its parent element, which is the document itself. Also, we have given margin-top: 90vh that will put the <div> element with the class name bottom-text at the bottom of the webpage.

We have added some CSS to the text class to move the text upside from its current position. Here, we have chosen relative as a value of the position property, which allows us to move the text relative to its position.

To move the text up, we have used the bottom property, which will move the text up by 60px, as we have assigned that value. Users can also change the value of the bottom property and move text up by different amounts.

Assigning negative values to the bottom property will move the text down.

HTML Code:

<div class="bottom-text">
    <h3 class="text">This is the text at bottom.</h3>
</div>

CSS Code:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    position: relative;
    bottom: 60px;
}

In the above output image, the left image shows the text at its original position, and the right image shows the text after moving text up from its current position.

Use the margin-top CSS Property to Move the Text Up

In the example below, we have used the margin-top CSS property to move the text up from its current position.

As discussed in the above example, this example also contains the <div> element with the bottom-text class and the <h3> element with the text class name. We have set the text at the bottom of the webpage by adding some CSS to the bottom-text class.

To move the text up, we will apply the margin-top property to the text class and assign it the negative value. Setting a positive value to the margin-top property will move the text down by value amount.

HTML Code:

<div class="bottom-text">
    <h3 class="text">This text will be shown at the bottom.</h3>
</div>

CSS Code:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    margin-top:-100px;
}

The negative margin-top value is the best way to move text or any HTML element up from its current position.