CSS bottom Property

Description

The bottom property specifies the distance between the element's bottom edge and the bottom edge of the containing block.

  • Initial valueauto
  • Applies toPositioned elements
  • InheritedNo
  • MediaVisual
  • Computed valueIf specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'
  • AnimatableYes
  • CSS VersionCSS2, CSS3
  • JavaScript syntaxobject.style.bottom

Syntax

Formal syntax: auto | <length> | <percentage> 

bottom: 20px;
bottom: 10%;
bottom: auto;

Values

  • <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
  • <percentage>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
  • autoDefault position, according to the regular HTML layout of the page.

Example

.class {
   display: block; 
   position: absolute;
   top: 40px; 
   right: 75px; 
   bottom: 10px; 
   left: 75px
}

Browser Support

1+Firefox7+Explorer1+Chrome1+Safari8+Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.