CSS margin-bottom

The CSS margin-bottom property is used to create bottom margin around specified element, or around the border of specified element (if element has a border). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{margin-bottom: 120px;}
   </style>
</head>
<body>
   
   <div>This DIV has a bottom margin of 120px</div>
   
</body>
</html>

Output

This DIV has a bottom margin of 120px

CSS margin-bottom Syntax

The syntax of margin-bottom property in CSS, is:

margin-bottom: x;

The value of x should be any of the following:

auto - used to allow browser to create bottom margin. The default value is 0.
length - used to create custom sized bottom margin.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - To learn about margin in detail, refer to its separate tutorial.

CSS margin-bottom Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b{border: 2px solid blue;}
      .b{margin-bottom: 80px; padding: 12px;}
   </style>
</head>
<body>
   
   <div class="a">
      <div class="b">This DIV has a bottom margin of 80px</div>
   </div>
   
</body>
</html>

Output

This DIV has a bottom margin of 80px

CSS Online Test

« Previous Tutorial Next Tutorial »