This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



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.