CSS bottom property
- previous page border-width
- next page box-decoration-break
Definition and Usage
The 'bottom' property specifies the bottom edge of the element. This property defines the offset between the bottom margin boundary of the positioned element and the bottom boundary of the containing block.
Note:If the value of the 'position' property is 'static', setting the 'bottom' property will have no effect.
Description
For static elements, it is auto; for length values, it is the corresponding absolute length; for percentage values, it is the specified value; otherwise, it is auto.
For relatively defined elements, if both bottom and top are auto, their calculated values are both 0; if one of them is auto, the opposite value of the other is taken; if neither is auto, bottom takes the opposite value of top.
See Also:
CSS Tutorial:CSS Positioning
HTML DOM Reference Manual:bottom property
Example
Set the bottom edge of the image 5 pixels above the bottom edge of its containing element:
img { position:absolute; bottom:5px; }
CSS Syntax
bottom: auto|length|initial|inherit;
Property Value
Value | Description |
---|---|
auto | Default Value. The position at the bottom is calculated by the browser. |
% | Set the bottom position of the element as a percentage of the width of the containing element. Negative values can be used. |
length | Set the bottom position of the element using units such as px, cm, etc. Negative values can be used. |
inherit | Specifies that the bottom property should inherit its value from the parent element. |
Technical Details
Default Value: | auto |
---|---|
Inheritance: | no |
Version: | CSS2 |
JavaScript Syntax: | object.style.bottom="50px" |
More examples
- Set the bottom edge of an image using pixel values
- This example demonstrates how to set the bottom edge of an image using pixel values.
- Set the bottom edge of an image using percentage
- This example demonstrates how to set the bottom edge of an image using percentage values.
Browser support
The numbers in the table indicate the first browser version that fully supports this attribute.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- previous page border-width
- next page box-decoration-break