Easy Tutorial
Css3 Pr Transition Property Css Pr Grid Sel Active Pr Outline Style Pr Class Clear Css Selectors Pr Mix Blend Mode Css3 Pr Target New Sel Out Of Range Pr Dim Min Height Sel Checked Css Backdrop Filte Css3 Pr Target Position Css3 Pr Align Items Pr Border Left Style Css3 Pr Transition Timing Function Pr Border Bottom_Color Css3 Pr Resize Css3 Pr Text Justify Func Cubic Bezier Css3 Pr Animation Direction Pr Font Font Family Func Calc Css Animatable Pr Grid Template Rows Css Colors Pr Dim Line Height Func Rgb Css Sel Hover Css3 Pr Perspective Origin Sel Link Css3 Pr Column Rule Style Css3 Pr Border Image Source Sel Element Pluss Sel Id Css3 Pr Row Gap Sel Firstletter Sel In Range Css3 Pr Gap Func Repeating Radial Gradient Sel Invalid Sel Empty Pr Clip Path Css3 Pr Border Bottom Left Radius Pr Pos Z Index Css3 Pr Transition Delay Pr Text Direction Css3 Pr Animation Fill Mode Css3 Pr Appearance Pr Gen Content Sel Optional Pr Border Right Color Css3 Pr Pointer Events Css Websafe Fonts Sel After Css3 Pr Font Stretch Pr Grid Template Columns Css3 Pr Nav Index Pr Grid Row Gap Pr Text Text Transform Sel Attribute Value Contains Pr Background Repeat Sel Disabled Css3 Pr All Func Conic Gradient Sel Only Of Type Pr Tab Caption Side Pr Grid Row End Pr Font Font Size Css3 Pr Animation Play State Pr Border Righ Sel Firstchild Pr Print Pagebb Pr Padding Top Pr Border Right Width Css3 Pr Grid Columns Css3 Pr Box Pack Css Ref Aural Pr Padding Right Sel Attr End Css3 Pr Border Image Sel Element Element Css3 Pr Backface Visibility Css3 Pr Background Pr Border Right Css3 Pr Flex Wrap Sel Only Child Sel Not Css3 Pr Outline Offset Func Repeating Conic Gradient Func Radial Gradient Pr Border Left Color Sel Valid Css3 Pr Animation Keyframes Sel Before Css3 Pr Border Bottom Right Radius Css3 Pr Word Wrap Pr Grid Auto Flow Css3 Pr Nav Down Css3 Pr Rotation Pr Object Fit Pr Outline Color Pr Text Word Spacing Pr Gen Counter Increment Pr Import Rule Sel Class Css3 Pr Column Rule Width Sel Nth Of Type Css3 Pr Flex Css3 Pr Nav Up Css3 Pr Border Top Right Radius Pr Margin Left Css3 Pr Transform Style Pr Padding Left Css Pr Writing Mode Sel Last Of Type Pr Outline Width Css3 Pr Filter Pr Font Weight Css3 Pr Transform Pr Grid Gap Pr Pos Right Css3 Pr Text Overflow Css3 Pr Column Rule Color Pr Border Pr Border Left Width Sel Root Css3 Pr Hanging Punctuation Sel Element Comma Pr Grid Area Pr Gen Quotes Css3 Pr Border Image Slice Css3 Pr Animation Timing Function Pr Grid Auto Row Pr Border Left Pr Tab Empty Cellsp Css3 Pr Justify Content Pr Border Right Style Css3 Pr Box Flex Group Sel Selection Css3 Pr Animation Sel All Sel Nth Last Of Type Css3 Browsersupport Css3 Pr Border Image Outset Css Reference Pr Background Blend Mode Css3 Pr Box Sizing Sel Nth Child Pr Grid Column Css3 Pr Font Face Rule Sel Element Pr Pos Clip Pr Text Color Pr Pos Vertical Align Pr Margin Right Sel Attribute Value Lang Css3 Pr Transition Duration Pr Dim Max Width Pr Background Image Css3 Pr Column Fill Css Inherit Pr Grid Column Start Pr Class Cursor Func Repeating Linear Gradient Css3 Pr Box Orient Sel Focus Pr Margin Bottom Pr Grid Column End Pr Padding Pr Font Font Style Pr Border Collapse Css Initial Sel Attribute Value Pr Mix Blend Mode Html Css3 Pr Font Size Adjust Css3 Pr Opacity Pr List Style Position Pr Grid Column Gap Sel Attribute Css3 Pr Flex Flow Css3 Pr Icon Css3 Pr Mediaquery Pr Text Text Indent Sel Last Child Css3 Pr Border Image Repeat Sel Firstline Pr Grid Row Css3 Pr Text Decoration Style Css3 Pr Target Name Func Var Pr Print Pageba Func Rgba Pr Text Text Decoration Pr Border Style Func Counter Sel Read Only Pr List Style Image Css3 Pr Rotation Point Css3 Pr Background Size Pr Border Bottom Css3 Pr Punctuation Trim Pr Font Font Variant Pr Border Top Width Pr Pos Bottom Css3 Pr Animation Delay Pr Background Position Pr Grid Auto Columns Css3 Pr Background Origin Css3 Pr Grid Rows Css3 Pr Overflow Y Css3 Pr Box Ordinal Group Css3 Pr Box Direction Pr Grid Template Areas Pr Background Color Pr Gen Counter Reset Css3 Pr Align Content Pr Print Pagebi Func Hsl Pr Border Bottom Style Pr Grid Template Css3 Pr Flex Grow Css3 Pr Flex Basis Sel Element Gt Css3 Pr Target Pr Object Position Css3 Pr Text Wrap Css3 Pr Column Rule Css3 Pr Text Emphasis Func Minmax Sel Lang Pr Grid Auto Rows Pr List Style Type Pr Pos Overflow Css3 Pr Order Func Max Css3 Pr Text Outline Pr Grid Row Start Pr Pos Top Css3 Pr Text Shadow Pr Border Top Color Pr Text Text Align Func Min Pr Dim Max Height Css Functions Pr Class Display Pr Dim Height Sel Gen Sibling Css3 Pr Animation Duration Pr Border Spacing Func Repeat Sel Attr Begin Pr Border Width Css3 Pr Overflow X Pr Outline Css3 Pr Tab Size Css3 Pr Animation Name Pr Dim Width Css3 Pr Text Decoration Line Css Units Css3 Pr Box Flex Css3 Pr Word Break Func Attr Pr Margin Top Pr Text Unicode Bidi Css3 Pr Text Align Last Css3 Pr Columns Css3 Pr Align Self Pr Border Color Pr Text Letter Spacing Sel Enable Sel Attr Contain Sel Required Pr List Style Css3 Pr Column Gap Css3 Pr Flex Direction Css3 Pr Text Decoration Color Pr Border Top Css3 Pr Transition Func Linear Gradient Css Colors Legal Css3 Pr Overflow Style Css3 Pr Box Lines Pr Charset Rule Sel Target Css3 Pr Nav Right Css3 Pr Column Count Css3 Pr Background Clip Pr Dim Min Width Pr Class Position Pr Margin Pr Class Float Pr Border Bottom Width Css3 Pr Transform Origin Css3 Pr Column Width Css3 Pr Box Align Sel First Of Type Css3 Pr Border Top Left Radius Pr Background Attachment Sel Enabled Pr Pos Left Pr Tab Empty Cells Css3 Pr Column Span Pr Tab Table Layout Pr Border Top Style Css3 Pr Border Radius Func Hsla Css3 Pr Nav Left Pr Padding Bottom Css3 Pr Box Shadow Css3 Pr Animation Iteration Count Css Colornames Pr Class Visibility Pr Text White Space Sel Read Write Css3 Pr Flex Shrink Css3 Pr Perspective Css3 Pr Border Image Width Css Colorsfull Sel Nth Last Child Sel Visited Pr Font Font Pr Border Bottom Color
❮ Pr Border Top Width Css3 Pr Animation Delay ❯

CSS bottom Property

Example

Set the bottom edge of an image to be 5px above the bottom edge of the element:

Property Definition and Usage

For absolutely positioned elements, the bottom property sets the distance higher/lower than the bottom edge of the containing element.

For relatively positioned elements, the bottom property sets the distance higher/lower than the bottom edge of its normal position.

Note: If "position: static", the bottom property has no effect.

Explanation: 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 positioned elements, if both bottom and top are auto, their computed values are both 0; if one of them is auto, it takes the opposite value of the other; if neither is auto, bottom takes the opposite value of top.

Default value: auto
Inherited: no
--- ---
Version: CSS2
--- ---
JavaScript syntax: object.style.bottom="50px"
--- ---

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
bottom 1.0 5.0 1.0 1.0 6.0

Property Values

Value Description
auto Default value. The browser calculates the bottom position.
% Sets the bottom position in percent of the containing element. Can use negative values.
length Sets the bottom position using px, cm, etc. Can use negative values.
inherit Specifies that the value of the bottom property should be inherited from the parent element.

Related Articles

CSS Tutorial: CSS Positioning

❮ Pr Border Top Width Css3 Pr Animation Delay ❯