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.


Practice Your Knowledge

In the following code snippet, what value is given for the bottom margin: margin: 3px 8px 15px 10px;




Related articles