CSS margin-bottom Property

The margin-bottom property is used to set margin space on the bottom of an element. Negative values are valid.

If non-replaced inline elements (such as <tt> or <span>) are used, CSS margin-bottom property won't have any effect.

Initial Value 0
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. Bottom margin of the element is animatable.
Version CSS2
DOM Syntax object.style.marginBottom = "70px";

Syntax

margin-bottom: length | auto | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom { margin-bottom: 100px;}
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Another example where the bottom margin of the element is defined as "4em":

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .bottom { margin-bottom: 4em;}
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p class="bottom">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </body>
</html>

Another example where the bottom margin of the element is specified by "px", "em" and "%" so as to show the difference:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.p1 {
      margin-bottom: 5em;
      }
      p.p2 {
      margin-bottom: 20%;
      }
      p.p3 {
      margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Margin-bottom property example</h2>
    <p>A paragraph with no margins specified.</p>
    <p class="p1">Bottom margin is set to 5em.</p>
    <p class="p2">Bottom margin is set to 20%.</p>
    <p class="p3">Bottom margin is set to 20px.</p>
    <p>A paragraph with no margins specified.</p>
  </body>
</html>

Values

Value Description
auto Sets the bottom margin. It is the default value of this property.
length Defines a bottom margin in px, pt, cm, etc. Default value is 0.
% Sets the bottom margin in % of containing element.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles