CSS margin-bottom Property - Programmers Portal

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;
}

Try it Now

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;
}

Try it Now

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”;