CSS - margin-bottom Property

Quiz

CSS margin-bottom property sets the width of the margin on the bottom of an element.

Syntax

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

Property Values

Value	Description
auto	The browser sets the margin for bottom edge automatically. Default.
length	The margin space of bottom edge is set using length units (e.g. px, em, rem etc.). Negative values are allowed.
percentage	The margin space of bottom edge is set using percentage values (e.g. 10%) relative to the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Margin Bottom Property

The following examples explain the margin-bottom property with different values.

Margin Bottom Property with Auto Value

To allow the browser to automatically calculate the bottom margin based on the available space, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding: 20px;
      }

      .dimensions {
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .box {
         background-color: lightblue;
         margin-bottom: auto;
      }

      .sample-box {
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-bottom property
   </h2>
   <h4>
      margin-bottom: auto;
   </h4>
   <div class="container">
      <div class="box dimensions">
         This box has margin-bottom: auto
      </div>
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div></div>
   </div>

</body>

</html>

Margin Bottom Property with Length Values

To set the bottom margin, we can specify the margin size using length units (e.g. px, em, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding: 20px;
      }

      .dimensions {
         background-color: lightblue;
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .sample-box {
         background-color: lightgreen;
      }

      .box1 {
         margin-bottom: 40px;
      }

      .box2 {
         margin-bottom: 5em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-bottom property
   </h2>
   <h4>
      margin-bottom: 40px;
   </h4>
   <div class="container">
      <div class="box1 dimensions">
         This box has margin-bottom: 40px
      </div>
      <div class="sample-box dimensions"> 
         sample box
      </div>
   </div>
   <h4>
      margin-bottom: 5em;
   </h4>
   <div class="container">
      <div class="box2 dimensions">
         This box has margin-bottom: 5em
      </div>
      <div class="sample-box dimensions"> 
         sample box
      </div>
   </div>

</body>

</html>

Margin Bottom Property with Percentage Values

To set the bottom margin, we can specify the margin size using percentage values(e.g. 10% (of the width of the containing element)). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         padding: 20px;
      }

      .dimensions {
         background-color: lightblue;
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .sample-box {
         background-color: lightgreen;
      }

      .box1 {
         margin-bottom: 4%;
      }

      .box2 {
         margin-bottom: 18%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-bottom property
   </h2>
   <h4>
      margin-bottom: 4%;
   </h4>
   <div class="container">
      <div class="box1 dimensions">
         This box has margin-bottom: 4% of container width
      </div>
      <div class="sample-box dimensions"> 
         sample box
      </div>
   </div>
   <h4>
      margin-bottom: 18%;
   </h4>
   <div class="container">
      <div class="box2 dimensions">
         This box has margin-bottom: 18% of container width
      </div>
      <div class="sample-box dimensions"> 
         sample box
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
margin-bottom	1.0	6.0	1.0	1.0	3.5

css_reference.htm

Print Page