The **`bottom` property** in #key# CSS: Cascade Style Sheets #key# is used to define the bottom position of the elements placed *vertically*.

There will be no effect on the non-positioned elements. 

#   
## Syntax

---
```CSS
bottom: auto | length | percentage | initial | inherit;  
```

#   
#  Property values

- **`auto`**: This is the default value. The browser uses it to calculate the value of the bottom edge.

- **`length`**: Sets the position of the bottom edge in `px`, `cm`, etc. 

- **`%`**: Sets the value in accordance with the percentage of the containing element.

- **`initial`**: We use this to set the value to its default value.

- **`inherit`**: This is used to inherit property from its parent value.


##  
## Code

Below is the basic #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the bottom property.

<html>
  <head>
    <title>Example</title>
  </head>
  
  <body>
    <btm>Welcome to Educative Edpresso Shots</btm>
  </body>

</html>

//Defining the properties of the box and it's bottom properties
btm {
	width: 80px;
    position: absolute;
    bottom: 1px;           //Defining the bottom position
    padding: 50px;
    font: bold 18px sans-serif;
    background: #066683;	
}   

codemirror

What is the CSS bottom property?

Defines vertical bottom position; affects only positioned elements. Values: auto, length, %, initial, inherit.