Margin-bottom

CSS margin-bottom property is used to set margin space on the bottom of an element. We can also give negative values.

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

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         .bottom { margin-bottom: 4em;}
      </style>
   </head>
  <body>

    <p>This paragraph has no margin-bottom which is defined especially. This paragraph has no margin-bottom which is defined especially.</p>
    <p class="bottom">But you can see another text here which has a bottom margin defined as 4em. But you can see another text here which has a bottom margin defined as 4em.</p>
    <p>This paragraph has no margin-bottom which is defined especially. This paragraph has no margin-bottom which is defined especially.</p>

</body>
</html>

Here the result is:



Property Values

Value Descriptions
length It sets the bottom margin in px, pt, cm, etc. Its default value is 0px.
% It sets bottom margin in percent of the width of the containing element.
auto When we choose auto value, the browser sets the bottom margin.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.




Related articles