CSS Bottom Property

In this chapter you will learn:
What is bottom property?
Example of bottom property

CSS bottom property is used for positioning an element or tag from the bottom and helps to get absolute position of the positioned element. It also specifies the edge of an element from bottom margin edge and its containing block. You can set the value of bottom property in px, em, %, auto and inherit. You can use this property if you want to set the element to the exact position from the bottom but the condition is, the element must be absolute positioned.

Example of bottom property:-
Example 1.
<html>
<head>
 <styletype="text/css">
 img
{       position:absolute;
        bottom:0px;
}
</style>
 </head>
 <body>
 <imgsrc="roze.jpg" alt="example ofbottom property"/>
</body>
 </html>

Guide:-
In this example, image is positioned from bottom margin 0 (Zero) px.
Output:-
example of bottom property zero
Example 2.
<html>
<head>
 <styletype="text/css">
 img
{       position:absolute;
        bottom:200px;
}
</style>
 </head>
 <body>
 <imgsrc="roze.jpg" alt="example ofbottom property"/>
</body>
 </html>

Guide:-
In this example, the image is positioned 200 px from the bottom.
Output:- example of bottom property zero

Summary

In this chapter, you have learned about CSS bottom property and its use with an example so now you can try to use this property according to your requirement. Click on the next button to continue-

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.