Style marginBottom Property
Example
Set the bottom margin of a <div> element:
Description
The marginBottom property sets or returns the bottom margin of an element.
Both the margin property and the padding property insert space around an element. However, the difference is that margin inserts the space around the border, while padding inserts the space within the border of an element.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| marginBottom | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the marginBottom property:
Set the marginBottom property:
Property Values
| Value | Description |
|---|---|
| % | Defines the bottom margin in % of the width of the parent element |
| length | Defines the bottom margin in length units |
| auto | The browser sets the bottom margin |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | 0 |
|---|---|
| Return Value: | A String, representing the bottom margin of an element |
| CSS Version | CSS1 |
More Examples
Example
Change the bottom margin of a <div> element back to "normal":
Example
Return the bottom margin of a <div> element:
Example
Difference between marginBottom and paddingBottom:
document.getElementById("myDiv").style.marginBottom = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.paddingBottom = "100px";
}
Related Pages
CSS tutorial: CSS Margin
CSS reference: margin-bottom property
HTML DOM reference: margin property