CSS marginbottom Property (original) (raw)

CSS margin-bottom Property

Last Updated : 28 May, 2026

The margin-bottom property in CSS is used to add space below an element. It helps maintain proper spacing between elements in a webpage layout.

• It specifies the bottom margin area of an element.
• The margin can be set using length values or percentages.
• The default value of the margin-bottom property is 0.

**Syntax:

margin-bottom: | | auto

**Property values:

• **Length: This value specifies the length of the margin with a fixed value. This value can be positive, negative or zero.

**Example:

html `

<style>
    div{
        background-color: lightgreen;
    }
</style>

GeeksforGeeks

<!-- margin-bottom for below div 
    is set to 50px -->
<div style="margin-bottom: 50px">Line One</div>

<!-- margin-bottom for below div 
    is set to 0px -->
<div style="margin-bottom: 0px">Line Two</div>

<div>Line Three</div>

`

• **Percentage: This value specifies the amount of margin as a percentage relative to the width of the containing element.

**Example:

html `

<style>
    h1 {
        color: green;
    }
    
    .larger {
        width: 300px;
        background-color: white;
    }
    
    .smaller {
        width: 100px;
        background-color: white;
    }
    
    div{
        background-color: lightgreen;
    }
</style>

GeeksforGeeks

<!-- margin-bottom is set to 10% with width of 
    containing box set to 300px -->
<div class="larger">
    <div style="margin-bottom: 10%";>Line One</div>
    <div>Line Two</div>
</div>

<!-- margin-bottom is set to 10% with width of 
    containing box set to 100px -->
<div class="smaller">
    <div style="margin-bottom: 10%;">Line One</div>
    <div>Line Two</div>
</div>

`

• **auto: If the value of this property is set as "auto" then the browser automatically calculates a suitable value for the margin size.