CSS margin Property

February 10, 2021 12:37 pm IST

You are Here:

CSS margin Property

CSS margin property sets the margin area on all four sides of an element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ margin: 50px; border: 1px solid black; } </style> </head> <body> <h1>CSS margin Property</h1> <p>This is a paragraph.</p> <div>This div is 50px away from all four margins.</div> <p>This is a paragraph.</p> </body> </html>

Run

Syntax

Using CSS

element{ margin: 25px; }

Using Javascript

object.style.margin="25px";

Animatable

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

Default Value

Default value for CSS margin property is 0.

Property Value

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

Value	Explanation
length	Allows you to define the margin of the element in any CSS length unit.
%	Allows you to define the margin 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 for an element (div).

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ margin: 5%; border: 1px solid black; } </style> </head> <body> <h1>CSS margin Property</h1> <p>This is a paragraph.</p> <div>This div is 5% away from all four margins.</div> <p>This is a paragraph.</p> </body> </html>

Run

Using JavaScript

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

Example

HTML Online Editor

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

Run

CSS margin is a shorthand CSS Property

The margin is a shorthand CSS Property of the following CSS properties.

The margin CSS property can have one, two, three, or four values.

margin: 50px
- all four margins are 50px
margin: 50px 25px
- top and bottom margins are 50px
- right and left margins are 25px
margin: 50px 25px 10px
- top margin is 50px
- right and left margins are 25px
- bottom margin is 10px
margin: 50px 25px 10px 5px
- top margin is 50px
- right margin is 25px
- bottom margin is 10px
- left margin is 5px

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid #8c8c8c; } div:nth-child(3){ margin: 50px; } div:nth-child(5){ margin: 50px 25px; } div:nth-child(7){ margin: 50px 25px 10px; } div:nth-child(9){ margin: 50px 25px 10px 5px; } </style> </head> <body> <h1>CSS margin Property</h1> <h2>margin: 50px;</h2> <div>all four margins are 50px.</div> <h2>margin: 50px 25px;</h2> <div>top and bottom margins are 50px, right and left margins are 25px.</div> <h2>margin: 50px 25px 10px;</h2> <div>top margin is 50px, right and left margins are 25px, bottom margin is 10px.</div> <h2>margin: 50px 25px 10px 5px;</h2> <div>top margin is 50px, right margin is 25px, bottom margin is 10px, left margin is 5px.</div> </body> </html>

Run