In this article, we will discuss the property of an element which is called the “Bottom”. This property is used to define the positional attribute of any element present in an HTML file. The “Bottom” property is a part of the positional properties’ subset which has a top, left, and right properties in it. In this article, we will discuss several different methods through which we can assign the bottom property to an element.

Bottom Property

The bottom property is used to define the positioning of an element from the base of the page, and it defines the gap between the end of the page and the element. To define the bottom property, we use the following syntax:

As we can see, the bottom property is specified by calling the keyword followed by a value that can vary in five different types which are: auto, length, percentage, initial, and inherit. The bottom property will only affect the element when the position property is set to fix, otherwise it will not apply to the element.

Method 01: Using the Auto Keyword for Assigning the Bottom Property in an HTML File with the Help of Inline CSS

In this method, we will use the auto keyword to assign the bottom property of an element in an HTML file. This will align the element with the base of the browser’s page. We will use the inline CSS styling format in this method to assign the bottom property to an element.

In the previous script, we provided a heading to the body by using the h1 tag and some inline CSS as well. Then we opened a paragraph tag, and, in this tag, we added the position and bottom property and set them to “fixed” and “auto”, respectively. The position fixed property enables the bottom to create an effect on the paragraph tag and adjust it according to our browser. Now, we save this file and run it on our browser to observe the effect of this property.

As we can see in the previous screenshot, the paragraph in the body tag is present in between the page after the heading. This happened because of the position and bottom properties.

Method 02: Using the Pixels to Assign the Bottom Property in an HTML File with the Help of Inline CSS

In this approach, we will assign the bottom attribute of an element in an HTML file using the length format (value in pixels). This will make the element adjust with the bottom of the browser’s page with the help of the given length.

We used the “h1” tag and some inline CSS to give the body a heading in the previous script. Then we opened a paragraph tag and applied the position and bottom properties to it. The position property was then set to “fixed,” and the bottom property was given a pixel value of “25px.” The position fixed attribute allows the bottom to have an effect on the paragraph tag and adapt it based on the specified length and the page of our browser. Now, we save this file and run it in our browser to see how this property works.

As we can see in the previous screenshot, the paragraph in the body tag is present at the bottom of the page after the heading. We can see that there is a gap between the paragraph and the base of the page because the position and bottom properties are set to give it a length of “25px”.

Method 03: Using the Bottom Property with a “Percentage” for An Element Using Inline CSS

In this method, we will use the percentage format to set the bottom property of an element in an HTML file. This causes the element to adjust to the bottom of the browser’s page by using a percentage value. In this method, we will add the bottom attribute to an element using inline CSS style.

In the previous script, we utilized the “h1” tag and some inline CSS to give the body a heading. Then we opened a paragraph tag and set its position and bottom property. The position property was then set to “fixed,” and the bottom property was given a percentage value that is “30 percent.” The position fixed property allows the bottom to affect the paragraph tag and modify it based on the given percentage amount and our browser’s page. We now save this file and open it in our browser to check how this property works.

As seen in the previous example, the paragraph in the body tag appears at the bottom of the page after the header. The position and bottom attributes are set to a percentage value of “30 percent” so there is a gap between the paragraph and the bottom of the page.

Method 04: Using the Inherit Keyword for Assigning the Bottom Property in an HTML File with the Help of Inline CSS

In this approach, we will set the bottom attribute of an element in an HTML file using the inherit keyword. This will force the element to adjust to the bottom of the browser’s page by utilizing the property value of the nearest parent function. Using the inline CSS style, we will add the bottom property to an element in this approach.

In the previous script, we opened a paragraph tag and set its position and bottom property. After that, the position property was set to “fixed,” and the bottom property was given the keyword “inherit.” The position fixed property allows the bottom to affect the paragraph tag and change it based on the nearest parent function’s property value and the browser’s page. This file will now be saved and opened in our browser to see how this property works.

The paragraph in the body tag appears near the header, as seen in the previous snippet. There is a gap between the paragraph and the header because the bottom property is specified to give the paragraph the property function of the nearest parent function.

Method 05: Using the Initial Keyword for Assigning the Bottom Property in an HTML File with the Help of Inline CSS

We will use the “initial” keyword to set the bottom property of an element in an HTML file. This will force the element to adjust to the bottom of the browser’s page using the browser’s default settings. In this method, we will add the bottom attribute to an element using the inline CSS style.

We opened a paragraph tag and set its position and bottom property as shown in the above script. The position property was then set to “fixed,” and the bottom property received the keyword “initial.” The position fixed attribute allows the bottom to affect the paragraph tag and change it based on the browser’s default settings. This file is now saved and viewed in our browser to demonstrate the use of this feature.

As observed in the previous snippet, the paragraph in the body tag is near the header. Since the bottom property is specified to modify the paragraph to our browser’s default settings, there is a gap between the paragraph and the header.

Conclusion

The bottom property of CSS has been addressed in this article. The bottom property is included in a subgroup of position properties such as left, right, and top, and it is reliant on the position property as we explained. We implemented this concept with variations in the value’s format by using Notepad++ to edit the HTML file.