CSS margin-bottom Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The margin-bottom CSS property is used to control the spacing between the bottom edge of an element and the elements that come after it in a document's layout. It allows web developers to adjust the amount of space, in pixels or other specified units, that separates the element from its subsequent content. This property is often used to create vertical spacing and control the layout of elements on a web page, ensuring proper alignment and visual separation between different sections or elements within a webpage.

Initial value: 0
Applies to: All elements
Inherited: No
Computed value: As specified, but with relative lengths converted into absolute pixel values.
Animatable: Yes
JavaScript syntax: object.style.marginBottom

Interactive Demo

Margin Bottom Example

Syntax

margin-bottom: <length> | <percentage> | auto

Values

<length>Specifies a fixed length, using any standard CSS length units. Negative Values are allowed.
<percentage>A percentage always relative to the width of the containing block.
inherit

Example

HTML

<div class="parent"> 

   <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 

</div>

CSS

.parent { 
   background: #e2edc1;
   padding: 10px;
} 
.child { 
   border: 3px solid #333391; 
   padding: 10px;
   margin: 10px;
   margin-bottom: 40px;
}

Result

Editor