/    /  CSS bottom property

CSS bottom property

 

This property defines an offset for the bottom edge of the positioned element, relative to the bottom of the reference element’s box or browser window.

Absolutely position: The bottom property provides how far the bottom edge of the element’s box is offset above the bottom edge of its containing block.

Relatively position: The bottom property specifies the offset with respect to the bottom edge of the box itself.

 

Syntax:

 

top: length | percentage | auto | initial | inherit

 

Property Values:

 

  • auto: The browser to calculate the bottom edge position.
  • length: The position of bottom property in px, cm, pt, etc.
  • percentage: The position of bottom property in percentage (%).
  • initial: Property to its default value.
  • inherit: Property from its parent element.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<title>
CSS bottom Property
</title>
<style>

div{
position: absolute;
width: 150px;
height: 150px;
font-size: 30px;
}
#len {
bottom: 200px;
border: 5px solid #cc6699;
}
#em {
bottom: 1em;
border: 5px solid #669900;
}

h1{
text-align: center;
}
</style>
</head>

<body>
<h2> The bottom Property </h2>
<div id = "len"> bottom: 200px; </div>
<div id = "em"> bottom: 1em; </div>
</body>
</html>

 

OUTPUT:

 

CSS bottom property