CSS margin-bottom Property

February 10, 2021 12:37 pm IST

You are Here:

CSS margin-bottom Property

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

Note: A positive value places it farther from its neighbors, while a negative value places it closer.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ border: 1px solid black; } div{ display: flex; flex-direction: column; justify-content: flex-end; } p{ margin-bottom: 100px; } </style> </head> <body> <h1>CSS margin-bottom Property</h1> <div> <p>This paragraph is 100px above all the following element.</p> </div> </body> </html>

Run

Syntax

Using CSS

element{ margin-bottom: 50px; }

Using Javascript

object.style.margin-bottom="50px";

Animatable

Yes, margin-bottom property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS margin-bottom property is 0.

Property Value

The following table provides a list of values for CSS margin-bottom property.

Value	Explanation
length	Allows you to define the margin-bottom of the element in any CSS length unit.
%	Allows you to define the margin-bottom of the element in % of the width of the containing block.

Using Percentage

In the following example, we will use percentage value to set margin-bottom for an element (p).

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ border: 1px solid black; } div{ display: flex; flex-direction: column; justify-content: flex-end; } p{ margin-bottom: 20%; } </style> </head> <body> <h1>CSS margin-bottom Property</h1> <div> <p>This paragraph is 20% above all the following element.</p> </div> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS margin-bottom property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS margin-bottom Property</h1> <p>This is a paragraph (Apply margin-bottom).</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.marginBottom = "75px"; } </script> </body> </html>

Run