CSS Margin-bottom Property

margin-bottom of CSS is used to set, or change the bottom margin of a given element, separately from potential other margins.

Margin is the distance from elements to their surrounding elements on a page, you can use it to avoid ugly collusions with other elements, and help create a smoother contrast between elements. Below image is an illustration of where margin is applied to to elements.

CSS Box-model, illustration showing how elements are effected by margin and padding.

Possible Values

auto (Default)
Units of Measurement

How to use margin-bottom in your css

In this example, the bottom-margin of h2 is set to 2em. The content after h2, will have a top-distance to h2 of 2em.

h2 {
  margin-bottom: 2em;
}

Inherited? NO!

A fully working example is shown below, you can use this for testing purposes.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>How to use the margin-bottom property of CSS</title>
    <style type="text/css">
    h1 {
     margin-bottom: 2em;
    } 
    </style>
  </head>

  <body>
   <article>
     <h1>This header has a bottom-margin of 2em</h1>
     <p>How to work with bottom margins in css</p>
   </article>
  </body>

</html>

Brugbart Vision!

Possible Values

How to use margin-bottom in your css

Links