CSS - margin-bottom Property

The margin-bottom property sets the width of the margin at the bottom of an element.

A positive value moves it away from neighboring elements, whereas a negative value brings it closer.

Possible Values

The following list covers all the possible values of margin-bottom property.

  • <length> - The fixed value of the margin's size.

  • <percentage> - The percentage of the margin measured in relation to the contained block's inline size, or the writing-mode defined width in a horizontal language.

  • auto - The browser selects a suitable value to use on its own.

Applies to

All elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.

Syntax

margin-bottom = <length-percentage> | auto

CSS margin-bottom - Basic Example

Here is an example where all the different values that can be passed to the margin-bottom CSS property:

<html>
<head>
<style>
   p {
      background-color: rgb(201, 238, 240);
      border: 1px solid black;
      width: fit-content;
   }

   .margin-px {
      margin-bottom: 30px;
   }

   .margin-perc {
      margin-bottom: 10%;
   }

   .margin-em {
      margin-bottom: 3em;
   }

   .margin-auto {
      margin-bottom: auto;
   }

   .margin-neg {
      margin-bottom: -10px;
   }
</style>
</head>
   
<body>
   <p class="margin-px">
      The bottom margin is 30px.
   </p>
   
   <p class="margin-perc">
      The bottom margin is 10%.
   </p>
   
   <p class="margin-em">
      The bottom margin is 3em.
   </p>
   
   <p class="margin-auto">
      The bottom margin will be set by the browser.
   </p>
   
   <p class="margin-neg">
      The bottom margin is -10px.
   </p>
</body>
</html>

inherit - when you want the bottom margin of a child element to match the bottom margin of its parent element, use the property inherit.

Note: inherit value can be used only on child elements and not on parent element.

CSS margin-bottom - Inherit

Here is an example where the margin-bottom of a child element is inherited from the parent element−

<html>
<head>
<style>
   .p {
      margin-bottom: 20%;
      }
   p.example {
      margin-bottom: inherit;
      border: 1px solid #4CAF50;
      }
</style>
</head>
<body>
<h4>margin-bottom property - inherit</h4> 
   <p>The margin-bottom is 20% for parent element.</p>
   <p class="example">A child element where the bottom margin is inherited from the parent (p) and is 20%.</p>
</body>
</html>
Advertisements