CSS margin-bottom
property sets the margin of the bottom of an element. It can be specified in any valid CSS length formats such as ‘px’, ’em’, ‘rem’ or even in percentage(%).
It can have a positive, negative or zero value.
Example:
div{ margin-bottom: 100px; }
It is also possible to set a negative margin. In such a scenario, the element pulls the neighboring elements towards it and the content starts overlapping. See the example below:
Example:
p{ margin-bottom: -40px; }
CSS Syntax
The margin-bottom
property has the following syntax:
margin-bottom: length|percentage|auto|initial|inherit;
Property Values
The margin-bottom
property accepts the following values:
length | Sets a fixed bottom margin in CSS length formats such as ‘px’, ’em’, ‘rem’, etc. It can be positive, negative or zero. The default value is zero(0). |
percentage | Sets bottom margin in percentage. The percentage value is calculated by taking the percentage of the element’s width itself. |
auto | The browser itself calculates the margin value. |
initial | Sets the margin-bottom property to its default value(0). |
inherit | Inherits the margin-bottom property from the parent element. |
General Info
Default Value | 0 |
Inherited | No |
JavaScript Usage | element.style.marginBottom = “100px”; |